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Introduction 


This is a solutions book for styling HTML 4.01 and XHTML 1.1 with CSS 2.1. It contains more 
than 350 design patterns you can put to use right away. Each design pattern is modular and 
customizable, and you can combine patterns to create an unlimited number of designs. 

Each design pattern has been thoroughly tested and proven to work in all major web 
browsers including Internet Explorer 7, Internet Explorer 6, Firefox 2, Opera 9, and Safari 2. 

All the content in this book is usable and practical. You won't waste time reading about 
things that don’t work! With this book, you will no longer have to use hacks, tricks, endless 
testing, and constant tweaking in multiple browsers to get something to work. 

Using a design pattern is as easy as copying and pasting it into your code and tweaking a 
few values. This book shows you which values you can modify and how they affect the result 
so you can create the exact style and layout you want—without worrying whether it will work. 

This is more than a cookbook. It systematically covers every usable feature of CSS and 
combines these features with HTML to create reusable patterns. Each pattern has an intuitive 
name to make it easy to find, remember, and talk about. Accessibility and best practices are 
carefully engineered into each design pattern, example, and source code. 

You can read straight through the book, use it as a reference, and use it to find solutions. 
You'll love how the book's consistent layout makes it a joy to use. 

The book puts examples on the left page and explanations on the right. Each example 
includes a screenshot and all relevant HTML and CSS code so you can easily see how each 
design pattern works. The explanation for each design pattern is included on the right-facing 
page of the example so you can easily study the example while you read how it works. 

The layout also makes the book very usable as an e-book because you can see the example 
and explanation all on one screen; otherwise, you would have to flip back and forth between 
pages, which is difficult to do in an e-book. 

Each design pattern has a name, which is placed at the top of each page. This makes it 
easy to find a design pattern, to remember it, and to talk about it with others. Since the name, 
screenshot, code, and explanation are placed in the same location in each set of facing pages, 
you can quickly thumb through the book to find what you are looking for. 

Design patterns are organized by topic, and all usable CSS rules are covered in depth and 
in context like no other book. All design patterns are accessible and follow best practices, 
making this book a worthwhile read from cover to cover as well as an excellent reference to 
keep by your side while you are designing and coding. 

This book unleashes your productivity and creativity in web design and development. 
Design patterns are like Legos—you can combine them in countless ways to create any 
design. They are like tools in a toolbox, and this book arms you with hundreds of tools you 
can whip out to solve problems quickly and reliably. Instead of hacking away at a solution, 
this book shows you how to create designs predictably—by combining predictable patterns. 
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INTRODUCTION 


Audience 


This book is written for those who have some familiarity with CSS and HTML. It is for new- 
comers who have previously read an introductory book on CSS and HTML. It is for designers 
and developers who tried CSS at one time and gave up because it never seemed to work right. 
It is for professionals who want to take their CSS skills to a higher level. It is for all who want 
to create designs quickly without hacking around until they find something that works in all 
browsers. 

This book assumes the reader knows the basics of coding CSS and HTML. If you work 
exclusively in WYSIWYG designers like Dreamweaver or FrontPage and never look at HTML 
or CSS code, you may find the code in this book overwhelming. 

If you like to learn by example, like to see how code works, and have some familiarity with 
CSS and HTML, you will love this book. 

In Chapters 17 and 20, seven design patterns use JavaScript. To fully understand them, 
you need to understand the basics of JavaScript, but you do not need to know JavaScript to 
use these patterns. Most importantly, you do not need to know anything about JavaScript to 
understand and use the remaining 343+ design patterns because they have nothing to do with 
JavaScript! 


Innovations 


This book contains several innovative concepts, terms, and approaches. These are not new or 
radical: the technology is already built into the major browsers, the concepts are implied in 
the CSS specification, and the terms are commonly used. What makes them innovative is how 
I define and use them to show what can be done with CSS and HTML. In other words, they are 
innovative because they simplify learning, understanding, and using CSS and HTML. These 
ideas change how you think about CSS and HTML, and that makes all the difference. Further- 
more, many of the design patterns in the book are innovative because they document 
combinations of properties and elements to solve difficult problems like never before. 


Six Box Models 


One innovation in the book is the idea that CSS has six box models instead of one. CSS offi- 
cially has one box model that defines a common set of properties and behaviors. A single box 
model is a very useful concept, but it is oversimplified. Over the years, I learned the hard way 
that box model properties work differently depending on the type of box. 

This is one reason why so many people struggle with CSS. The box model seems simple, 
yet when one uses a box model property, such as width, it only works some of the time or may 
work differently than expected. For example, the width property sets the interior width of a 
block box, but on table boxes it sets the outer width of the border, and on inline boxes it does 
absolutely nothing. 

Rather than treating different behaviors as an exception to one very complicated box 
model, I define six simple box models that specify the behavior for each type of box. Chapter 4 
presents the six box models, which are inline, inline-block, block, table, absolute, and float. 
Since you always know which of these six box models you are using, you always know how 
each box model property will behave. 
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Furthermore, each box model defines its own way that it flows or is positioned. For exam- 
ple, inline boxes flow horizontally and wrap across lines. Block boxes flow vertically. Tables 
flow their cells in columns and rows. Floats flow horizontally, wrap below other floats, and 
push inline boxes and tables out of the way. Absolute and fixed boxes do not flow; instead, 
they are removed from the flow and are positioned relative to their closest positioned 
ancestor. 


Box Model Extents 


Another innovation in the book is the concept that there are three ways a box can be dimen- 
sioned: it can be sized, shrinkwrapped, or stretched (see Chapter 5). Each type of box requires 
different combinations of properties and property values for it to be sized, shrinkwrapped, or 
stretched. Various design patterns in Chapters 5 through 9 show how this is done. These three 
terms are not official CSS terms, but they are implied in the CSS 2.1 specification in its formu- 
las and where it mentions “size,” “shrink-to-fit,” and "stretch."! 

Of course, sizing, shrinkwrapping, and stretching are not new ideas. What is innovative is 
that this book clearly defines these three terms and shows how they are a foundational feature 
of CSS and a key generator of CSS design patterns. 


Box Model Placement 


Another innovation is the idea that there are three ways a box can be placed in relation to its 
container or its siblings: specifically, it can be indented (or outdented), offset from its siblings, 
or aligned and offset from its container (see Chapter 8). The CSS 2.1 specification talks much 
about offsetting positioned elements, and it talks a little about aligning elements (see Chapter 9 
of the CSS 2.1 specification), but it does not discuss how elements can be indented, although 
this behavior is implied in its formulas. 

Indenting, offsetting, and aligning are different behaviors. For example, an indented box is 
stretched and its margins shrink its width, whereas an aligned box is sized or shrinkwrapped 
and its margins do not shrink its width. Aligned and indented boxes are aligned to their con- 
tainers, whereas offset boxes can be offset from their container or offset from their siblings. 

Different combinations of properties and property values are needed to indent, offset, 
and align different types of boxes. The design patterns in Chapters 8 and 9 show how this is 
done. 

Of course, indenting, offsetting, and aligning are not new ideas. What is innovative is that 
this book clearly defines these three terms and shows how they are a foundational feature of 
CSS and a key generator of CSS design patterns. 





1. Inthe CSS 2.1 specification, the terms "size" and "sized" occur 15 times in Chapters 8, 9, 10, 11, 17, and 
18. These occurances refer to the general sense that a box has size. 


The terms "shrink" and "shrink-to-fit" occur 9 times in Chapters 9 and 10 of the CSS 2.1 specification. 
The idea that different boxes can shrinkwrap to fit their content is implied in Sections 10.3.5 through 
10.3.9 and Section 17.5.2. 


The terms "stretch" and "stretched" occur 4 times in Chapters 9 and 16. The idea of stretching a box to 
its container is mentioned in passing as shown in the following quote (italics added), *many box posi- 
tions and sizes are calculated with respect to the edges of a rectangular box called a containing block." 
(See Sections 9.1.2, 9.3.1, and 10.1.) 
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Column Layouts 


Another innovation is the discovery, naming, and documenting of 12 automated techniques 
built into browsers for laying out columns in tables (see Chapter 16). 

All the major browsers include these powerful column layout features. They are compatible 
across the major browsers and are very reliable. Even though using tables for page layout is 
not recommended,” tabular data still needs to be laid out, and you can take advantage of 
these column layouts to make tabular data look great. 


Fluid Layouts 


Another innovation is Fluid Layouts (see Chapter 17). The concept of fluid layouts is not new, 
but the process of creating them is commonly one of trial and error. In Chapter 17, I present 
four simple design patterns you can use to create complex fluid layouts with confidence and 
predictability in all major browsers. 

These design patterns, Outside-in Box, Floating Section, Float Divider, and Fluid Layout, 
use floats and percentage widths to make them fluid, but they do so without the problems you 
normally encounter using these techniques, such as collapsed containers, staggered floats, 
and percentages that push floats below each other? 

The Fluid Layout design pattern creates columnar layouts with the versatility of tables but 
without using tables. Even better than tables, these layouts automatically adjust their width 
and reflow from columns into rows as needed to fit into narrow displays. 


Event Styling 


Another innovation is the Event Styling JavaScript Framework presented in Chapter 17. This is 
a simple, powerful, open source framework for dynamically and interactively styling a docu- 
ment. It uses the latest best practices to ensure that HTML markup is completely free of 
JavaScript code and completely accessible, and all styling is done with CSS. Furthermore, the 
framework allows you to select elements in JavaScript using the same selectors you use to 
select elements in CSS. This vastly simplifies and unifies the styling and scripting of a dynamic 
HTML document! 

The book includes this framework to show how to integrate JavaScript, CSS, and HTML 
so you can use styles interactively. Of course, if you do not want to use JavaScript, you can skip 
over the five JavaScript design patterns in Chapter 17 and the two JavaScript patterns in 
Chapter 20—the remaining 343+ design patterns do not use JavaScript. 


Combining HTML and CSS to Create Design Patterns 


The final and most pervasive innovation in the book is the idea of combining general types of 
HTML elements with CSS properties to create design patterns. The book defines four major 





2. Using tables for layout creates accessibility issues for nonsighted users. Furthermore, fluid layout 
techniques (as shown in Chapter 17) are completely accessible and much more adaptable than tables. 


3. Internet Explorer 6 has a number of bugs that may occur when you float elements. Unfortunately, 
there is no way to create a solution that always bypasses these bugs, although the Fluid Layout design 
pattern does a good job of avoiding them most of the time. Fortunately, Internet Explorer 7 fixes these 
bugs. 
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types of HTML elements in Chapter 2 (structural block, terminal block, multi-purpose block, 
and inline) and Chapter 4 maps them to the six box models (inline, inline-block, block, table, 
absolute, and float). 

Each design pattern specifies how it applies to types of HTML elements. In other words, 
a design pattern is more than a recipe that works only when you use specific elements; it is a 
pattern that applies to all equivalent types of HTML elements. 

For example, the Floating Drop Cap design pattern in Chapter 18 specifies a pattern that 
uses block and inline elements, but it does not specify which block and inline elements you 
have to use (see Listing 1). For example, you could use a paragraph for the BLOCK element and 
a span for the INLINE element (see Listing 2), or you could use a division for the BLOCK and a 
<strong> for the INLINE, and so forth. 

In some exceptional cases, a design pattern may specify an actual element, like a <span>. 
This happens when a specific element is the best solution, the only solution, or an extremely 
common solution. Even in these cases, you can usually swap out the specified element for 
another element of the same type. You can even use a different type of element as long as it 
produces valid XHTML and you change its box model to be compatible (see the Display 
design pattern and the box models in Chapter 4; also see Blocked in Chapter 11, Inlined in 
Chapter 13, and Tabled, Rowed, and Celled in Chapter 15). 


Listing 1. Floating Drop Cap Design Pattern 


HTML 


«BLOCK class-"hanging-indent"» 
«INLINE class="hanging-dropcap"> text </INLINE> 
«/ BLOCK» 


CSS 


*.hanging-indent { padding-left:*VALUE; text-indent:-VALUE; margin-top:+VALUE; } 
*.hanging-dropcap { position:relative; top:4+VALUE; left:-VALUE; font-size:+SIZE; 
line-height:4SIZE; ] 


Listing 2. Floating Drop Cap Example 


HTML 


«p class-"hanging-indent"» 
«span class-"hanging-dropcap" »H«/span»anging Dropcap. 
</p> 


CSS 


*.hanging-indent { padding-left:50px; text-indent:-50px; margin-top:-25px; } 
*.hanging-dropcap { position:relative; top:0.55em; left:-3px; font-size:60px; 
line-height:60px; } 
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Conventions 


Each design pattern uses the following conventions: 


* Uppercase tokens should be replaced with actual values. (Notice how the uppercase 
tokens in Listing 1 are replaced with values in Listing 2.) 


* Elements are uppercase when you should replace them with elements of your choice. 
If an element name is lowercase, it should not be changed unless you ensure the 
change produces the same box model. The following are typical element placeholders: 


ELEMENT represents any type of element. 
INLINE represents inline elements. 


INLINE TEXT represents inline elements that contain text such as «span», «em», 
Or «code». 


BLOCK represents block elements. 

TERMINAL BLOCK represents terminal block elements. 

INLINE BLOCK represents inline block elements. 

HEADING represents «h1», <h2>, <h3>, <h4>, «h5», and <h6>. 

PARENT represents any element that can be a valid parent of its children. 
CHILD represents any element that can be a valid child of its parent. 
LIST represents any list element including «ol», «ul», and «dl». 


LIST ITEM represents any list item including <li>, «dd», and «dt». 


* Selectors that you should replace are uppercase. If a selector contains lowercase text, 
that part of the selector should not be changed unless you also modify the HTML 
pattern, such as changing a class name. The following are typical placeholders: 


SELECTOR () represents any selector. 
INLINE SELECTOR {} represents any selector that selects inline elements. 


INLINE BLOCK SELECTOR () represents any selector that selects inline-block 
elements. 


BLOCK SELECTOR () represents any selector that selects block elements. 


TERMINAL BLOCK SELECTOR () represents any selector that selects terminal block 
elements. 


SIZED BLOCK SELECTOR () represents any selector that selects sized block elements. 
TABLE SELECTOR {} represents any selector that selects table elements. 


CELL SELECTOR () represents any selector that selects table cell elements. 
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* PARENT SELECTOR {} represents any selector that selects the parent in the design 
pattern. 


* SIBLING SELECTOR {} represents any selector that selects the children in the pat- 
tern. 


* TYPE {} represents a selector that selects elements by a type of your choice such as 
h1 or span. 


e *,CLASS {} represents a selector that selects elements by a class name of your 
choice. 


* #ID {} represents a selector that selects elements by an ID of your choice. 


* Values that you should replace are represented by uppercase tokens. If a value contains 
lowercase text, that part of the value should not be changed. The following are typical 
value tokens: 


* Some values are literal and not meant to be replaced such as 0, -9999px, 1px, 1em, 
none, absolute, relative, and auto. These values are always lowercase. 


e VALUE represents a positive measurement greater than or equal to zero, such as 
0, 10px, or 2em. 


* -VALUE represents a positive measurement less than or equal to zero, such as 
0, -10px, or -2em. 


* +VALUE represents any measurement. 

* VALUEem represents an em measurement. 

* VALUEpx represents a pixel measurement. 

e VALUE represents a percentage measurement. 

* VALUE OR PERCENT represents a value that can be a measurement or a percentage. 


* WIDTH STYLE COLOR represents multiple property values, such as those required by 
border.Iuse an uppercase token for each value. 


e url("FILE.EXT") represents a background image where you replace FILE.EXT with 
the URL of the image. 


* CONSTANT represents a valid constant value. For example, white-space allows three 
constant values: normal, pre, and nowrap. For convenience, I often list the valid 
constant values in uppercase with underscores in between each possible value, 
such as NORMAL PRE NOWRAP. 


* ABSOLUTE FIXED represents a list of constant values from which you can choose one 
value. The underscore separates the constant values. The complete list of values for 
position includes static, relative, absolute, and fixed. If a design pattern only 
works for absolute and fixed, the pattern specifies position:ABSOLUTE FIXED. Ifit 
works for all four values, it specifies position:STATIC RELATIVE ABSOLUTE FIXED or 
position:CONSTANT. 
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* -(TAB BOTTOM + EXTRA BORDER + EXTRA PADDING) is an example of a formula that 
you would replace with a calculated value. The uppercase tokens in the formula 
are tokens that occur elsewhere in the design pattern. For example, if you assigned 
TAB BOTTOM to 10px, EXTRA BORDER to 10px, and EXTRA PADDING to 10px, you would 
replace the formula with -30px. 


Using This Book 


You can use the book to master CSS. You can read straight through the book to take your CSS 
skills to a higher level and to discover the many golden nuggets tucked away inside design 
patterns. Each chapter is organized so that it builds on design patterns presented earlier in the 
chapter and presented in previous chapters. On the other hand, since individual chapters and 
design patterns are self-contained, you can read them one by one in any sequence to master a 
specific topic or technique. 

You can use the book as a reference book. This book explains all of the usable CSS prop- 
erties and shows how to use them in examples. Even more importantly, many properties 
behave differently when combined with other properties. Each design pattern identifies and 
documents the unique combination of properties required to create a specific result. This 
makes it a reference book not only for how CSS properties work alone, but also for how they 
work in combination. 

You can use the book to learn by example. Since all examples in the book follow best 
practices, you can learn good habits and techniques just by studying them. To make studying 
the book by example easier, you can use the "See also" sections to look up all related design 
patterns. This allows you to easily see many examples of how a specific CSS property or fea- 
ture can be used in a variety of contexts. 

You can use the book as a cookbook to help you create designs or to solve problems. 
Design patterns are organized by topic so you can quickly find related solutions. 

Ihave added extra features to the book to make it easy to find a solution when you need 
it. You can use the table of contents, the index, thumb tabs, chapter outlines, design pattern 
names, and the "See also" section of each design pattern to quickly find properties, patterns, 
answers, and solutions. Since the screenshots in each example are in the same location on 
every page, you can even thumb through the book while looking at screenshots to find a solu- 
tion. I find visual scanning a very easy, fast, and effective way to find solutions! 


Companion Web Site 


The companion web site, cssDesignPatterns.com, is designed to enhance your experience 
with the book. Each page contains links to related design patterns and a search box for finding 
patterns. Each design pattern contains the example and its source code as well as additional 
information, such as additional examples, errata, comments, and links to related resources on 
the Internet. 

At the end of each design pattern in the book is a link to the design pattern on 
cssDesignPatterns.com. (Each design pattern on the web site is a directory named after 
the design pattern with spaces in the design pattern name replaced by hyphens.) 

In addition, cssDesignPatterns.com contains design patterns that are not in the book. 
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How This Book Is Structured 


Chapters 1 through 3 explore the fundamentals of CSS and HTML: 


* Chapter 1 shows how design patterns make CSS easy. Here I demonstrate how to com- 
bine simple design patterns into more complex and powerful patterns. I also review the 
syntax of CSS and the cascade order. In addition, I present several charts that make 
using CSS easy: a list of links to useful CSS web sites, a one-page summary of CSS prop- 
erties; a four-page listing of all usable CSS properties, values, and selectors organized 
by where they can be used; charts on units of measure and font size; two example 
stylesheets for normalizing the styles of elements in all browsers; and a 12-step guide 
to troubleshooting CSS. 


e Chapter 2 introduces the design patterns that underlie HTML. In this chapter, I pres- 
ent the best practices of using HTML including coding in XHTML. I also explore the 
types of structures you can create with HTML including structural blocks, terminal 
blocks, multi-purpose blocks, and inlines. I also show how to use IDs and attributes 
for easy selection by CSS selectors. 


* Chapter 3 introduces design patterns for CSS selectors and inheritance. Here I 
demonstrate how selectors are the bridge between HTML and CSS. I present design 
patterns for type, class, ID, position, group, attribute, pseudo-element, pseudo-class, 
and subclass selectors. I also explore CSS inheritance. 


Chapters 4 through 6 explore the six CSS box models. They show how each HTML element is 
rendered as one of these six types of boxes (or not rendered at all). They demonstrate how the 
same properties produce different results in each box model, and how each box model flows 
differently from the other box models. 


* Chapter 4 explores the six box models: inline, inline-block, block, table, absolute, and 
float. 


* Chapter 5 explores the three ways of dimensioning a box: sized, shrinkwrapped, or 
stretched. 


* Chapter 6 explores each of the box model properties: margin, border, padding, 
background, overflow, visibility, and pagebreak. 


Chapters 7 through 9 explore how boxes flow or are positioned. 


* Chapter 7 explores the five positioning models (static, absolute, relative, fixed, and 
floated) and relates them to the six box models. 


* Chapter 8 explores the three ways a box can be positioned: for example, a box can be 
indented or outdented, offset from its siblings, or aligned and offset from its container. 


* Chapter 9 combines the patterns in Chapters 7 and 8: The combinations result in 
more than 50 design patterns for positioning elements—with a particular focus on 
absolute and fixed positioning. 
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Chapters 10 through 12 explore in detail how inline boxes flow and how to style, space, and 
align text and objects: 


* Chapter 10 explores the properties that style text and also contains three design 
patterns for hiding text while remaining accessible to nonsighted users. 


* Chapter 11 shows how to space inline content horizontally and vertically. 
* Chapter 12 shows how to align inline content horizontally and vertically. 
Chapters 13 and 14 explore in detail how blocks and images flow and how they can be styled: 


* Chapter 13 explores blocks, starting with a discussion of the structural meaning of 
blocks and how you can visually display that meaning. It covers lists, inlining blocks, 
collapsed margins, run-in blocks, block spacing, and marginal blocks. 


* Chapter 14 explores images, such as image maps, semi-transparent images, replacing 
text with images, sprites, shadowed images, and rounded corners. 


Chapters 15 and 16 explore in detail how to style and lay out tables and cells. 


* Chapter 15 explores tables including table selectors, collapsed borders, hiding cells, 
vertically aligning content in cells, and displaying inline and block elements as tables. 


* Chapter 16 explores laying out table columns using 12 patterns, which automatically 
shrinkwrap columns, size them, proportionally distribute them, and so forth. 


Chapter 17 explores how the flow of floats can be used to create fluid layouts: 


* Chapter 17 shows how to create fluid layouts that automatically adapt to different 
devices, fonts, widths, and zoom factors. It also shows how to create interactive layouts 
using JavaScript. 


Chapters 18 through 20 show how to combine design patterns to create a variety of solutions 
to the same problem. Each solution addresses different needs and has different advantages 
and disadvantages. Besides being useful solutions in and of themselves, they demonstrate 
how you can combine patterns to solve any design problem. 


* Chapter 18 explores drop caps. Here I cover seven types of drop caps using seven 
different combinations of design patterns. 


* Chapter 19 explores callouts and quotes. The chapter demonstrates five types of 
callouts and three types of quotes. 


* Chapter 20 explores alerts. Here I present three types of interactive alerts and eight 
types of text alerts (i.e., attention getters). 
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Downloading the Code 


All code is available at www. cssDesignPatterns.com. 

You can also download the code at www. apress.com by searching for and going to the 
detail page for Pro CSS and HTML Design Patterns. On the book's detail page is a link to the 
sample code compressed into a ZIP file. You can use a utility like WinZip to uncompress 
the code. 


Using the Code 


The code is arranged in folders, with a folder for each chapter. To make chapter folders easy to 
navigate, each folder name includes the chapter number and title. Inside each chapter folder 
are example folders: one for each design pattern presented in the chapter. 

So you can easily find examples, each example folder has the same name as its design 
pattern. This makes it easy and fast to find design patterns by searching folder names. Since 
the HTML in each example names and describes its design pattern, you can find a design 
pattern by searching for words inside HTML files. You could also search inside CSS files for 
examples that use a particular CSS property, such as display. 

To make it easy to view examples in multiple browsers, I put a file named index.html in 
the root folder that links to all design pattern folders. In turn, each folder contains a file 
named index.html that links to all the design patterns in that folder. These navigation pages 
make it quick to find and view each design pattern in each chapter. 

Each example folder contains all the files needed to make the example work. This makes 
it a breeze to use the examples in your own work: simply copy a folder and start making 
changes. You don't have to worry about tracking down and including files from other folders. 

The most important files in each example folder are example.html and page.css. 
example.html contains the XHTML code for the example. page.css is the main stylesheet 
for the example. 

Each example also uses a CSS file named site.css. It contains a few nonessential font 
and heading rules that give all the examples in the book the same basic look and feel. 

In a few exceptional cases, I use an additional CSS file to overcome bugs or nonstandard 
behavior in Internet Explorer.* ie6.css contains rules to fix problems in Internet Explorer 6. 
ie7.css contains rules to fix problems in Internet Explorer 7. ie67.css contains rules to fix 
problems in both versions 6 and 7. Rules in these files override rules in page.css. 

The seven JavaScript examples use five JavaScript files. These are explained in the Event 
Styling design pattern Chapter 17. page. js is the most important file because it contains 
JavaScript code specific to the example. The remaining JavaScript files are open source 
libraries. 

Lastly, each example folder contains all image files used by that example. 





4. There are only 25 of these files out of more than 350 design patterns. Most of these files contain only 
a single, simple rule, such as div(zoom:1; }. In spite of the numerous bugs, quirks, and nonstandard 
features of Internet Explorer 6, I only needed to build workarounds into 25 design patterns. This is 
because I carefully designed the patterns in this book to avoid problems in the first place. I allowed an 
exception in a pattern only when I could find no alternative. I literally had to throw out hundreds of 
design patterns to find patterns that work without exception. Lastly, because Internet Explorer 7 fixes 
most of the bugs in Internet Explorer 6, only 4 of these 25 exceptions apply to Internet Explorer 7. 
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Errata 


You can view errata at www. cssDesignPatterns.com and on the detail page of the book at 


WWW. apress.com. 
If you find an error in the book, I would greatly appreciate knowing about it. Please e-mail 
the problem to support@apress.com and support@cssDesignPatterns. com. 


Contacting the Author 


You can contact me at mike@cssDesignPatterns.com. I look forward to your comments, sugges- 
tions, and questions. 


CHAPTER 1 


Design Patterns: Making 
CSS Easy! 


0. the surface, CSS seems easy. It has 45 commonly used properties you can employ to style 
a document. Below the surface, different combinations of properties and property values trig- 
ger completely different results. I call this CSS polymorphism because the same property has 
many meanings. The result of CSS polymorphism is a combinatorial explosion of possibilities. 

Learning CSS is more than learning about individual properties. It is about learning the 
contexts in which properties can be used and how different types of property values work dif- 
ferently in each context. As an example, take the width property, which has many different 
meanings depending on how it is combined with other rules and what values are assigned to 
it. For instance, width has absolutely no effect on inlines. width:auto shrinkwraps floats to 
the width of their content. width:auto shrinkwraps absolutes when left and right are set to 
auto. width:auto stretches blocks to the width of their parent element. width:auto stretches 
absolutes to the width of their containing block when left and right are set to 0. width: 100% 
stretches blocks and floats to the width of their parent element as long as they do not have 
borders, padding, and margins. width: 100% stretches tables to the width of their parent even if 
they do have borders and padding. width: 100% stretches absolutes to the width of their closest 
positioned ancestor instead of their parent. width:100em sizes an element in relation to the 
height of its font-size, which allows the element to be sized wide enough to contain a certain 
number of characters. width: 100px sizes an element to a fixed number of pixels regardless of 
the font-size of its text. 

To complicate matters further, not all of the rules are implemented by browsers. For 
example, over 40 out of 122 properties and over 250 out of 600 CSS rules are not implemented 
by one or more of the major browsers. 

Trying to learn CSS by memorizing the extraordinary number of exceptions to each rule is 
extremely frustrating. 

To make learning CSS easy, this book documents all usable combinations of properties 
and property values. It puts properties in context and paints a complete picture of how CSS 
works. 

Imagine the time you will save by not having to read about rules that do not work and by 
not having to test every rule to see whether it works in every browser and in combination with 
other rules. I have already done this for you. I have run many thousands of tests. I have tested 
every CSS property and every combination of properties in every major browser including 
Internet Explorer 7, Internet Explorer 6, Firefox 2, Opera 9, and Safari 2. 


= 
= 
Lu 
[77] 
e 
[2 
[2] 
= 
x 
a 
= 





CHAPTER 1 ™ DESIGN PATTERNS: MAKING CSS EASY! 


I have boiled down these results into 350+ simple design patterns—all the CSS and HTML 
design patterns you need to create stunning, high-performance, and accessible web sites. 
After you learn these design patterns, you'll wonder how you ever developed web sites without 
them! 

In this chapter, I discuss the purpose of design patterns and how they work. I give some 
examples of how to combine design patterns to create new patterns. I also discuss how to use 
stylesheets, CSS syntax, and the cascading order to your advantage. 

Next, I present a series of charts that list all the usable CSS properties and units of measure. 
Ithen present 12 techniques for troubleshooting CSS quickly. Lastly, I discuss how to stan- 
dardize the way various browsers style elements—so you can override these default styles with 
confidence. 


Design Patterns—Structured Recipes 


Design patterns have been used with great success in software programming. They improve 
productivity, creativity, and efficiency in web design and development, and they reduce code 
bloat and complexity. In the context of CSS and HTML, design patterns are sets of common 
functionality that work across various browsers and screen readers, without sacrificing design 
values or accessibility or relying on hacks and filters. But until now they have not been applied 
systematically to HTML and CSS web design and development. 

Design patterns underlie all creative activities. We think in terms of patterns when we talk, 
write, and create. Design patterns are similar to document templates that we can fill in with 
our own content. In literature, they are like archetypal characters and plots. In music, they are 
like themes and variations. In programming, they are similar to reusable algorithms that can 
be systematically varied and combined with each other to produce a desired result. 

Once a design pattern is revealed, it greatly increases creativity and productivity. It can 
be used by itself to create quick results, and it can be easily combined with other patterns to 
create more complex results. Design patterns simplify and amplify the creative process. They 
make creation as easy as building with blocks or Legos. You simply choose predesigned pat- 
terns, vary them, and combine them to create the result you want. Patterns do not limit 
creativity—they unleash creativity. 

The seminal work Design Patterns: Elements of Reusable Object-Oriented Software by Erich 
Gamma, Richard Helm, Ralph Johnson, and John Vlissides (Addison-Wesley, 1995) explains 
that a design pattern consists of four elements: a pattern name, a problem, a solution, and 
tradeoffs. This book follows this approach. 

Since this is a practical book, it focuses directly on the concrete patterns designed into 
CSS and HTML that are actually implemented in the major browsers. This book also creates 
new design patterns by combining built-in patterns into higher-level patterns. 

In a very real sense, this is a book of patterns that you can use to create your designs. 


Using Design Patterns 


Chapters 1 through 7 present the basic properties and elements for styling layout. Chapters 8 
and 9 combine these properties to create all possible block, positioned, and floated layouts. 
Chapters 10 through 12 present the basic properties for styling text and also present combina- 
tions of properties you can use to create inline layouts. Chapters 13 through 16 combine 
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design patterns from previous chapters with specialty properties and elements to style blocks, 
lists, images, tables, and table columns. 

Together, Chapters 1 through 16 present over 300 design patterns created by combining 
45 common CSS properties with four types of elements (inline, inline-block, block, and table) 
and five types of positioning (static, relative, absolute, fixed, and float). 

This is the great power of design patterns: it is easy to take basic patterns and combine 
them to form more complex patterns. This makes learning CSS easy, and it makes using CSS 
very productive. Chapters 17 through 20 show how to combine these design patterns to create 
fluid layouts, drop caps, callouts, quotes, and alerts. 

To illustrate the simplicity and power of design patterns, the next five examples show how 
to take a series of basic design patterns and combine them into more complex patterns. You 
do not need to understand the details of each pattern—just the process of combining pat- 
terns. 

The first example in this series shows the background property in action. background is a 
design pattern built into CSS that displays an image behind an element. Example 1-1 shows 
the background property combined with a division element. The division is sized 250 by 
76 pixels so it will reveal the entire background image.! 


Example 1-1. Background Image 


© Background Image - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Background Image 


Heading 2 


HTML 





«hi»Background Image</h1> 
<div></div> 


css 
div ( background:url("heading2.jpg") no-repeat; width:250px; height:76px; } 


Example 1-2 demonstrates the Absolute design pattern. The idea behind the Absolute 
design pattern is to remove an element from the flow and position it relative to another 





1. This example is simple and yet it combines seven design patterns: the Structural Block Elements 
design pattern in Chapter 2; the Type Selector pattern in Chapter 3; the Block Box pattern in Chap- 
ter 4; the Width, Height, and Sized patterns in Chapter 5; and the Background design pattern in 
Chapter 6. 
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element. CSS provides the position: absolute rule for this purpose. When position: absolute 
is combined with the top and left properties, you can position an element at an offset from 
the top left of its closest positioned ancestor. I used position: relative to position the division 
so it would be the closest positioned ancestor to the span. I then absolutely positioned the 
span 10 pixels from the top and left sides of the division.” 


Example 1-2. Absolute 


© Absolute - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Absolute 


Sized Absolute 





HTML 


<h1>Absolute</h1> 


«div class="positioned"> 
<span class="absolute">Sized Absolute</span> 
</div> 


CSS 


* positioned ( position:relative; } 
*.absolute { position:absolute; top:10px; left:10px; } 


/* Nonessential styles are not shown */ 


Example 1-3 combines the design patterns in the first two examples to create the Text 
Replacement design pattern. The idea behind text replacement is to display an image in the 
place of some text (so you can have more stylistic control over the text because it is embedded 
in an image). In addition, you want the text to be present behind the image so that it becomes 
visible if the image fails to download. 


2. This example is simple, and yet it combines seven design patterns: the Inline Elements and Structural 
Block Elements design patterns in Chapter 2; the Class Selector pattern in Chapter 3; the Absolute Box 
pattern in Chapter 4; and the Absolute, Relative, and the Closest Positioned Ancestor patterns in 
Chapter 7. 


CHAPTER 1 ™ DESIGN PATTERNS: MAKING CSS EASY! 


I combined the Background and Absolute design patterns to create the Text Replacement 
pattern. I placed an empty span inside a heading. I relatively positioned the heading so child 
elements can be absolutely positioned relative to it. I assigned a background image to the 
span and absolutely positioned it in front of the text in the heading element. I sized the span 
and the heading to the exact size of the background image. 

The end result is that the background image of the span covers the text in the heading, 
and if the image fails to download, the styled text in the heading is revealed.? 


Example 1-3. Text Replacement 


© Text Replacement - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Text Replacement 


Heading 2 





HTML 


<h1>Text Replacement</h1> 
«h2 id="h2" »Heading 2<span></span></h2> 


CSS 

#h2 ( position:relative; width:250px; height:76px; overflow:hidden; } 

#h2 span ( position:absolute; width:250px; height:76px; left:0; top:0; 
background:url("heading2.jpg") no-repeat; } 


Example 1-4 demonstrates the Left Marginal design pattern. The idea behind this pattern 
is to move one or more elements out of a block into its left margin so you can have headings 
(or notes, images, etc.) on the left and content on the right.* 





3. The Text Replacement example uses the 14 design patterns shown in the previous two examples. 
It also introduces the ID Selector design pattern in Chapter 3. You can learn more about the Text 
Replacement design pattern in Chapter 10. 


4. The Left Marginal design pattern combines the Position Selector design pattern in Chapter 3; the 
Margin pattern in Chapter 6; the Absolute Box pattern in Chapter 4; and the Absolute, Relative, and 
the Closest Positioned Ancestor patterns in Chapter 7. 
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Example 1-4. Left Marginal 


© Left Marginal - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Left Marginal 


Heading You want to excerpt an element and move it into the left 
margin. 
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HTML 


«hi»Left Marginal</h1> 


«div class="left-marginal" > 
<h2 class-"marginal-heading"»Heading«/h2» 
You want to excerpt an element and move it into the left margin.</div> 


CSS 


*.left-marginal ( position:relative; margin-left:200px; } 
*.marginal-heading { position:absolute; left:-200px; top:0; margin:0; } 


Example 1-5 demonstrates the Marginal Graphic Dropcap design pattern. This pattern 
combines all the design patterns shown in the previous four examples. The idea behind this 
pattern is to create a graphical drop cap in the left margin of a block with all the advantages of 
the Text Replacement and Left Marginal design patterns.? 

To meet these requirements, I used the indent class to relatively position the paragraph so 
that it will be the closest positioned ancestor of the drop cap and to add a 120-pixel left mar- 
gin to the paragraph to make room for the drop cap. I used the graphic-dropcap class to 
absolutely position the drop cap, to move it into the paragraphs left margin, and to set it to the 
exact size of the dropcap image. I then absolutely positioned the span inside the graphic drop 
cap and moved it over the dropcap text so it covers the text with its background image. 

Viewed by itself, the Marginal Graphic Dropcap pattern is a somewhat complex combina- 
tion of 16+ design patterns. On the other hand, when viewed as a combination of the Text 
Replacement and Left Marginal design patterns, it is quite simple. This is the power of design 
patterns. 





5. The Marginal Graphic Dropcap design pattern is discussed in detail in Chapter 18. 
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Example 1-5. Marginal Graphic Dropcap 


© Marginal Graphic Dropcap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Marginal Graphic Dropcap 


arginal Graphic Dropcap. The letter M has been covered by the 
dropcap image. Screen readers read the text and visual users 

" see the image. If the browser cannot display the dropcap 
image, the text becomes visible. 





HTML 


<h1>Marginal Graphic Dropcap</h1> 


«p class="indent"><span class-"graphic-dropcap" >M<span></span></span>arginal 
Graphic Dropcap. The letter M has been covered by the dropcap image. 
Screen readers read the text and visual users see the image. 
If the browser cannot display the dropcap image, 
the text becomes visible.</p> 


CSS 


*.indent { position:relative; margin-left:120px; } 


*.graphic-dropcap { position:absolute; 
width:120px; height:90px; left:-120px; top:0; } 


*.graphic-dropcap span { position:absolute; 
width:120px; height:90px; margin:0; left:0; top:0; 
background:url("m.jpg") no-repeat; } 


Using Stylesheets 


You can place styles in three locations: stylesheets, <style>, and style. 

A stylesheet is an independent file that you can attach to an HTML document using the 
<link> element or CSS’s @import statement. <style> is an HTML element that you can embed 
within the HTML document itself. style is an attribute that can be embedded within any 
HTML element. 

I recommend putting styles in stylesheets. This reduces noncontent in your HTML docu- 
ments, and it puts all your styles in files that are easily managed. 
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Irecommend naming stylesheets using single-word, lowercase names. This keeps 
stylesheet names simple and easy to remember, and works safely in all operating systems. 
Isuggest you use a name that describes the scope and purpose of the stylesheet, such as 
site.css, page.css, handheld.css, print.css, and so forth. The standard extension for a 
stylesheet is .css. The standard Internet media type is text/css. 

Irecommend using the location of a stylesheet to control its scope. If a stylesheet is for an 
entire web site, you could place it in the root directory of the web site. If a stylesheet applies 
only to a document, you could place it in the same directory as the document. 

To link a stylesheet to an HTML document, you can include a «link» element in the 
«head» section of HTML documents, and you can place the URI of the stylesheet within the 
href attribute of the «link» element. Listing 1-1 shows the stylesheet links that I use in each 
example in this book. See the Header Elements and Conditional Stylesheet design patterns in 
Chapter 2 for more information on linking stylesheets. 


Listing 1-1. Attaching Stylesheets 


«link rel="stylesheet" hrefz"site.css" media="all" type="text/css" /» 
«link rel="stylesheet" href="page.css" media-"all" type="text/css" /» 
«link rel="stylesheet" href="print.css" media-"print" type="text/css" /» 
<!--[if lte IE 6]> 

<link rel="stylesheet" href="ie6.css" media-"all" type="text/css" /> 
<![endif]--> 


For increased download performance, you may want to include page-specific styles in the 
<style> element instead of in a separate page-specific stylesheet. Since these styles are page 
specific, there is little disadvantage to putting these styles in the header of the page. On the 
other hand, I do strongly recommend against using the style attribute of HTML elements 
because this creates very hard-to-maintain code. 


CSS Syntax 


CSS syntax is easy. A stylesheet contains styles; a style contains selectors and rules; and a rule 
contains a property and a value. The following is the design pattern for a style: 


SELECTORS { RULES } 
The following is the design pattern for a rule: 
PROPERTY: VALUE ; 


For example, p{margin:0; } is a style. p is the selector, which selects all «p» elements in an 
HTML document. The curly bracket ({}) operators assign the rule, margin:0;, to the selector, p. 
The colon (:) operator assigns the value 0 to the property, margin. The semicolon (;) operator 
terminates the rule. 

A style may have one or more selectors and one or more rules. For example, 
p.tip{margin:0; line-height:150%; } isa style. The curly bracket operators group the two 
rules, margin:0; and line-height :150%;, into a ruleset and assign it to the selector, p. tip, 
which selects all <p class="tip"> elements in an HTML document. 
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CSS Syntax Details 
The key points of CSS syntax are as follows: 


Unicode UTF-8 should be used to encode CSS files—the same way you should encode 
HTMI files. 


CSS code should be lowercase. Selectors are case sensitive when referencing element 
names, classes, attributes, and IDs in XHTML. CSS properties and values are case 
insensitive. For simplicity and consistency, I use lowercase characters for all CSS code 
including elements, classes, and IDs. 


Element names, classes, and IDs are restricted to letters, numbers, underscores ( ), 
hyphens (-), and Unicode characters 161 and higher. The first character of an element, 
class, or ID must not be a number or a hyphen. A classname and ID must not contain 
punctuation other than the underscore and hyphen. For example, my name2-1 is a valid 
name for a class or ID, but the following are invalid: 1, 1my name, -my name, my : name, 

my .name, and my, name. 


Multiple classes can be assigned to an element by separating each class name with a 
space, such as class="class1 class2 class3". 


Constant values should not be placed in quotes. For example, color:black; is correct, 
but color: "black"; is not. 


The backslash (\) can be used to embed characters in a context where they normally 
cannot occur; for example, \26B embeds & in a string or identifier. Anywhere from two 
to eight hex codes can follow a backslash, or a character can follow a backslash. 


Astring may contain parentheses, commas, whitespace, single quotes ('), and double 
quotes (") as long as they are escaped with a backslash, such as the following: 


"embedded left parentheses \( " 
"embedded right parentheses \) " 
bedded comma \, " 
bedded single quote V' 
bedded double quote \" " 

bedded single quote ' in a double-quoted string" 
bedded double quote ^" in a single-quoted string' 


n 


cO 0o 00 0 0 Oc 





A semicolon should terminate each CSS rule and @import statement. 


color:red; 
Qimport "mystylesheet.css"; 


Rulesets are created by enclosing multiple rules in curly braces, such as 
( color:red; font-size:small; }. 





6. 


In HTML, CSS selectors are case insensitive. 
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* Theright curly brace ()) immediately terminates a set of properties, unless it is 
embedded within a string, such as "}". 


* ACSS comment starts with /* and ends with */, such as /* This is a CSS comment */. 
Comments cannot be nested. Thus, the first time a browser encounters */ ina 
stylesheet, it terminates the comment. If there are subsequent occurrences of /*, they 
are not interpreted as part of the comment. For example: 


/* This is an incorrect comment 
/* because it tries to nest 
/* several comments. */ 
STARTING HERE, THIS TEXT IS OUTSIDE OF ALL COMMENTS! */ */ 
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Using Whitespace in CSS 


Whitespace in CSS includes only the following characters: space (M20), tab (09), new line 
(\0A), return (NOD), and formfeed (\0C). A browser will not interpret other Unicode whitespace 
characters as whitespace—such as the nonbreaking space (M40). 

You can optionally place whitespace before and after the following: selectors, curly 
braces, properties, colons, values, and semicolons. For example, all the following statements 
are correct and produce the exact same result: 


body(font-size:20px;line-height:1507;] 
body ( font-size:20px; line-height:150%; } 
body ( font-size : 20px ; line-height : 150% ; } 


body 
{ 
font-size: 20px; 
line-height: 150%; 
} 


In this book, I use a compact coding style in which I put no whitespace inside rules, and I 
put one space in between rules and selectors, such as the following: 


body { font-size:20px; line-height:150%; } 


Whitespace never occurs within a property name or within a constant property value. 
Whenever CSS uses multiple words for a property name or constant property value, it uses 
a hyphen to separate the words, such as font-family and sans-serif. On rare occasions, 
CSS uses CamelCase to combine multiple words into one constant value, such as 
ThreeDLightShadow. 
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Using Property Values 


Property values come in the following forms: constant text, constant numbers, lengths, per- 
centages, functions, comma-delimited lists of values, and space-delimited series of values. 
Each property accepts one or more of these types of values. 

Ihave included all common types of values in Example 1-6. But first, I have listed them 
here along with an explanation: 


* color:black; assigns the constant value black to the color property. Most properties 
have unique constant values. For example, the color property can be assigned to over 
170 constants that represent colors ranging from papayawhip to ThreeDDarkShadow. 
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* background-color:white; assigns the constant value white to the background-color 
property. Notice that the following three rules do the same thing as this rule, but use 
different types of property values. 





e background-color :rgb(100%,100%,100%); assigns the CSS function rgb() to 
background-color. rgb() takes three comma-delimited parameters between its paren- 
theses, which specify the amount of red, green, and blue to use for the color. In this 
example, percentages are used. 100% of each color makes white. 


* background-color:rgb(255,255,255); assigns white to the background-color. In this 
case, values from 0 to 255 are used instead of percentages. The value 0 is no color. The 
value 255 equals 10076 of the color. Using 255 for red, green, and blue makes white. 


* background-color:WindowInfoBackground; assigns the operating system color 
WindowInfoBackground to background-color. Notice how operating system color 
constants are in CamelCase.’ 


* font-style:italic; assigns the constant value of italic to font-style. The font-style 
property also allows two other constant values: normal and oblique. 


e font-size:20px; assigns a length of 20 pixels to font-size. You can assign a variety 
of measurements to most properties including px (pixel), em (height of the font or 
font-size), ex (height of the letter "x"), pt (point, i.e., 1/72 of an inch), in (inch), 
cm (centimeter), mm (millimeter), and pc (pica, i.e., 12 points, or 1/6 of an inch). 


* font-family:"Century Gothic", verdana, arial, sans-serif; assigns a comma- 
delimited list of font names to font-family. If the first font name is unavailable, a 
browser uses the second, and so forth. The last font name should be one of the generic 
font names: serif, sans-serif, or monospace, which works in every browser. Whenever 
a font name contains a space, it must be enclosed in double quotes, such as 
"Century Gothic". 


e line-height:150%; assigns 150% of the font-size to line-height. 


* margin:1em; assigns the size of the font to margin (i.e., font-size multiplied by 1). 





7. Each time you assign the same property to the same element, the new rule overrides the previous rule. 
Since the example contains four background- color rules in a row, the last one is applied. 
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* border:4px double black; creates a black, 4-pixel, double-line border. Notice how 
border takes three space-delimited values that represent the border's width, style, and 
color. The sequence of the values does not matter. border is a shortcut property for 
three properties: border-width, border-style, and border-color. There are several other 
shortcut properties including background, font, list-style, margin, and padding. 


* padding:0.25em; assigns one-quarter of the font size to padding (i.e., font-size multi- 
plied by 0.25). 


* background-image:url("gradient. jpg"); assigns the gradient. jpg image to 
background-image using the url function, which takes the URL of a file as its only 
parameter. I always put a URL in quotes, but you only have to if the URL contains 
whitespace. 


* background-repeat: repeat-x; assigns the constant repeat-x to background-repeat. 
Other background-repeat values include repeat-y, repeat, and no-repeat. 


* margin:0; assigns zero to margin. Zero is the only length that may be specified without a 
measurement. All other lengths must be immediately followed by a measurement, such 
as 1px, -1.5em, 2ex, 14pt, 0.5in, -3cm, 30mm, or 5pc. 


* font-weight:900; assigns the constant 900 to font-weight. This number is actually a 
constant. You can use the following constants for font-weight: normal, bold, bolder, 
lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900. (Note that browser support is 
poor for numerical font weights, generally treating 100 through 400 as normal and 500 
through 900 as bold. Furthermore, bolder and lighter is rarely supported by browsers 
and/or operating system fonts. Thus, I rarely use any value for font-weight other than 
normal or bold.) 


Later in the chapter, I present a four-page chart called that lists all usable CSS properties 
and values. color is the only property in the chart that has an incomplete list of usable values. 
It shows 79 of the 170 color constants. I organized the 79 color constants into three groups 
that you may find useful: the 16 standard colors organized by hue, 35 common colors organ- 
ized by hue from light to dark, and the 28 operating system colors. Throughout this book, I 
often use the color gold. I also use related hues such as wheat, orange, tomato, firebrick, and 
yellow. 


Tip You can disable a rule by placing the number 1 (or any other character for that matter) immediately in 
front of a property name; for example, 1background-color:white. This invalidates the rule, but only the 
one rule. All other valid rules before and after the invalid one are still processed. | often use this technique to 
invalidate one rule temporarily to disable its effect while testing other rules. 
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Example 1-6. CSS Syntax Is Easy 


©) CSS Syntax - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 





CSS syntax is EASY! 


HTML 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtmli-transitional.dtd"» 


«html xmlns-"http://www.w3.0rg/1999/xhtml" xml:lang-"en" lang-"en"» 


«head»«title»CSS Syntax«/title» 
«meta http-equiv-"Content-type" content-"text/html; charset-utf-8" /» 
<link rel="stylesheet" href-"page.css" ^ media-"all" type="text/css" /» 


<style><!-- 
body { color:black; background-color:white; 
background-color: rgb(100%, 100%, 100%) ; 
background-color:rgb(255,255,255); 
background-color:WindowInfoBackground; } 
--></style 


</head> 


<body> 
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> 
</body> 


</html> 


CSS 


body ( font-family:"Century Gothic", verdana, arial, sans-serif; 
font-size:20px; line-height:150%; 
margin:1em; border:4px double black; padding:0.25em; 
background-image:url("gradient.gif"); background-repeat:repeat-x; } 

p ( margin:0; } 

span ( font-weight:900; } 
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Using Cascade Order 


CSS allows you to assign the same rule to the same element multiple times. I call these com- 
peting rules. Browsers use the cascading order to determine which rule in a set of competing 
rules gets applied. For example, a browser assigns default rules to each element. When you 
assign a rule to an element, your rule competes with the default rule, but since it has a higher 
cascading priority, it overrides the default rule. 

The cascading order divides rules into six groups based on the type of selector used in the 
rule. A rule in a higher-priority group overrides a competing rule in a lower-priority group. 
Groups are organized by the specificity of their selectors. Selectors in lower-priority groups 
have less specificity than selectors in higher-priority groups. 

The guiding principle behind the cascade order is that general selectors set overall styles 
for a document and more specific selectors override the general selectors to apply specific 
styles. 

For example, you may want to style all elements in a document with no bottom margin 
using *{margin-bottom:0; }. You may also want to style all paragraphs in a document with a 
bottom margin of 10 pixels using p(margin-bottom:10px; }. You may also want to style the 
few paragraphs belonging to the double-space class with a bottom margin of 2 ems using 
*.double-space(margin-bottom:2em; }. You may also want to style one paragraph with an 
extra-large bottom margin of 40 pixels using #paragraph3{margin-bottom: 40px; }. In each of 
these cases, the cascade order ensures a more specific selector overrides a more general one. 

Following are the six selector groups listed from highest to lowest priority: 


1. The highest-priority group contains rules with ! important added to them. They 
override all non-! important rules. For example, #1100{border:6px solid 
black! important; } takes priority over #i100{border:6px solid black;]. 


2. The second-highest-priority group contains rules embedded in the style attribute. 
Since using the style attribute creates hard-to-maintain code, I do not recommend 
using it. 


3. The third-highest-priority group contains rules that have one or more JD selectors. For 
example, #1100{border:6px solid black; } takes priority over *.c10{border:4px solid 
black;j. 


4. The fourth-highest-priority group contains rules that have one or more class, attribute, 
or pseudo selectors. For example, *.c10{border:4px solid black; } takes priority over 
div(border:2px solid black; }. 


5. The fifth-highest-priority group contains rules that have one or more element selec- 
tors. For example, div{border:2px solid black; } takes priority over *{border : 0px 
solid black; }. 


6. The lowest-priority group contains rules that have only a universal selector—for 
example, *{border:0px solid black; }. 


When competing rules belong to the same selector group (such as both rules contain ID 
selectors), the type and number of selectors prioritize them further. A selector has higher 
priority when it has more selectors of a higher priority than a competing selector. For example, 
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11100 *.c20 *.c10{} has a higher priority than #i100 *.c10 div p span em{}. Since both 
selectors contain an ID selector, they are both in the third-highest-priority group. Since the 
first has two class selectors and the second has only one class selector, the first has higher 
priority—even though the second has more selectors. 

When competing rules are in the same selector group and have the same number and 
level of selectors, they are further prioritized by location. Any rule in a higher-priority location 
overrides a competing rule in a lower-priority location. (Again, this only applies when com- 
peting rules are in the same selector group and have the same number and level of selectors. 
Selector groups always take precedence over location groups.) The six locations are listed here 
from highest to lowest priority: 
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1. The highest-priority location is the <style> element in the head of the HTML docu- 
ment. For example, a rule in <style> overrides a competing rule in a stylesheet 
imported by an @import statement embedded within <style>. 





2. The second-highest-priority location is a stylesheet imported by an @import statement 
embedded within the <style> element. For example, a rule in a stylesheet imported 
by an @import statement embedded within <style> overrides a competing rule ina 
stylesheet attached by a <link> element. 


3. The third-highest-priority location is a stylesheet attached by a «link» element. For 
example, a rule in a stylesheet attached by a «link» element overrides a competing 
rule imported by an @import statement embedded within the stylesheet. 


4. The fourth-highest-priority location is a stylesheet imported by an @import statement 
embedded within a stylesheet attached by a «link» element. For example, a rule 
imported by an (import statement embedded within a linked stylesheet overrides a 
competing rule in stylesheet attached by an end user. 


5. The fifth-highest-priority location is a stylesheet attached by an end user. 


* An exception is made for ! important rules in an end-user stylesheet. These rules 
are given the highest priority. This allows an end user to create rules to override 
competing rules in an author's stylesheet. 


6. The lowest-priority location is the default stylesheet supplied by a browser. 


When multiple stylesheets are attached or imported at the same location level, the order 
in which they are attached determines the priority. Stylesheets attached later override 
stylesheets attached previously. 

When competing rules are in the same selector group, have the same number and level of 
selectors, and have the same location level, rules listed later in the code override rules listed 
earlier. 

In Example 1-7, each rule in the stylesheet is applied to the division element. Each rule 
applies a different border-width to «div». Cascading order determines which rule actually gets 
applied. I sorted the styles in the stylesheet into cascading order from least to most important. 
As you can see from the screenshot, the browser applies the last rule to the «div», which sets a 
14-pixel border around the «div». The browser applies this rule because it has the highest pri- 
ority in the cascading order—it is an ID selector with ! important attached to it. 
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Notice how ID selectors override class selectors, which in turn override element selectors, 
which in turn override the universal selector. Notice how ! important gives selectors a whole 
new magnitude of importance. For example, the ! important universal selector is more impor- 
tant than the un-! important ID selector! 

Notice how border-style:none! important; is placed in the body and html selectors to 
prevent the universal selector * from putting a border around «body» and «html». This also 
illustrates how element selectors override universal selectors. 


Example 1-7. Cascade Order 


Cascading Order - Level 1: important - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


limportant has highest priority. 


HTML 





<body> 
<div id="i100" class="c10">! important has highest priority.</div> 
</body> 


CSS 


html, body { border-style:none!important; } 


* ( border:Opx solid black; } /* Universal Selector */ 
div ( border:2px solid black; } /* Element Selector */ 
*.c10 ( border:4px solid black; j /* Secondary Selector */ 
#1100 ( border:6px solid black; } /* ID Selector */ 

* ( border:8px solid black!important; } /* lUniversal Selector */ 


div ( border:10px solid blacklimportant; } /* !Element Selector */ 
*.c10 ( border:12px solid black!important; } /* !Secondary Selector */ 
#i100 { border:14px solid black!important; ) /* !ID Selector */ 
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Simplifying the Cascade 

To keep the cascade order as simple as possible, I minimize the number of stylesheets that I 
attach and I do not use Qimport statements. I also avoid the ! important operator. Most impor- 
tantly, I sort my selectors so they are listed in cascade order in each stylesheet. 

I organize the stylesheet into six groups. I put all universal selectors first, followed by ele- 
ment, class, attribute, pseudo, and ID selectors. If I have any ! important selectors, I place 
them after the ID selectors in another set of groups. 

Keeping stylesheets sorted in cascade order helps me remember that the ID selectors 
override all class, attribute, pseudo, element, and universal selectors—no matter where they 
occur in the current stylesheet and in all other stylesheets. Likewise, it reminds me that class, 
attribute, and pseudo selectors in each stylesheet override all element and universal selec- 
tors—no matter where they occur. 

Keeping rules sorted in cascading order makes it easy to see the order in which competing 
rules are applied. This makes it easy to track down which rules are overriding other rules. I 
keep rules sorted in the cascading order as follows: 
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/* Universal Selectors */ 

/* Element Selectors */ 

/* Class, Attribute, and Pseudo Selectors */ 
/* ID Selectors */ 


/* limportant Universal Selectors */ 

/* limportant Element Selectors */ 

/* limportant Class, Attribute, and Pseudo Selectors */ 
/* limportant ID Selectors */ 
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CHAPTER 1 


CSS and HTML Links 


Description 

W3C Homepage for CSS 

W3C CSS 2.1 Specification 
W3C CSS Validator Service 
W3C HTML Validator Service 
W3C Mobile Web Validator 
W3C HTML Home Page 

W3C HTML 4.01 Specification 
W3C XHTML 1.0 Specification 
W3C Mobile Web Best Practices 1.0 
WSC Accessibility Initiative 
"HTML 5" Working Group 
Mozilla Developer Center 
Microsoft Web Workshop 


Opera Web Specifications 
Apple Safari Developer Connection 


Web Design Information 


Web Design Tutorials 


Tools 


CSS Mailing Lists 
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URL 

www.w3.org/Style/CSS 
www.w3.org/TR/CSS21 
jigsaw.w3.org/css-validator 
validator .w3.org 
validator.w3.org/mobile 
www.w3.org/MarkUp 
www.w3.org/TR/htm1401 
www.w3.org/TR/xhtml1 
www.w3.org/TR/mobile-bp 
www.w3.org/WAT 

www. whatwg.org 
developer.mozilla.org/en/docs 


msdn.microsoft.com/workshop/author/css/ 
css_node_entry.asp 


www. opera.com/docs/specs 
developer.apple.com/internet/safari 
www.welie.com/patterns 
microformats.org 
www.alistapart.com 

www. simplebits.com/notebook 
www.positioniseverything.net 
css.maxdesign.com. au 
csszengarden.com 
meyerweb.com/eric/css 
www.w3schools.com 
www.westciv.com/style_master/house 
developer. yahoo.com 

dean.edwards .name/my/cssQuery 
addons .mozilla.org/firefox/60 
addons .mozilla.org/firefox/179 
css-discuss.org 

babblelist.com 


CSS Properties 


display 
visibility 


float 
clear 


position 
z-index 
overflow 
cursor 


left 
right 
width 
min-width 
max-width 


top 

bottom 
height 
min-height 
max-height 
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margin 
margin-left 
margin-right 
margin-top 
margin-bottom 


border 
border-left 
border-left-color 
border-left-width 
border-left-style 


border-right 

border-right-color 
border-right-width 
border-right-style 


border-top 

border-top-color 
border-top-width 
border-top-style 


border-bottom 
border-bottom-color 
border-bottom-width 
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text-indent 
text-align 


color 


font 
font-family 
font-size 
font-style 
font-variant 
font-weight 


text-decoration 
text-transform 


vertical-align 


line-height 
white-space 
word-spacing 
letter-spacing 


direction 
unicode-bidi 
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/* LESS USABLE------- xf border-bottom-style 

/* caption-side * 

/* clip */ padding list-style 

/* content */ padding-left list-style-type 
/* empty-cells */ padding-right list-style-position 
/* outline af padding-top list-style-image 
/* outline-color */ padding-bottom 

/* outline-style */ border-collapse 
/* outline-width i background table-layout 

/* quotes a background-color 

/* orphans */ background-image page-break-after 
/* page-break-inside */ background-repeat page-break-before 
/* widows */ background-attachment 

/[*¥------------------- a background-position 
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DESIGN PATTERNS: MAKING CSS EASY! 


CSS Properties and Values: Common 


This list includes only those CSS properties and values that work in all the major browsers. 
The letter "i" before a property means it is inherited. The value in italics is the default. Some 
values are symbols representing multiple possibilities for a value. For example, LENGTH repre- 
sents 0, auto, none, and all measurements (A, px, em, ex, pt, in, cm, mm, and pc). 


Common 


i 


i 


display: 


visibility: 


background-color: 
background-image: 
background-repeat: 


background-attachment: 


background-position: 


border: 
border-width: 
border-style: 


border-color: 


border-left: 
border-left-width: 
border-left-style: 
border-left-color: 
border-right: 
border-right-width: 
border-right-style: 
border-right-color: 
border-top: 
border-top-width: 
border-top-style: 
border-top-color: 
border-bottom: 
border-bottom-width: 
border-bottom-style: 
border-bottom-color: 


CUISOI: 


applies to all elements and box models. 
inline, none, block, inline-block, list-item, 
table-cell, table, table-row 


visible, hidden 


transparent, COLOR 

none, url("file.jpg") 

repeat, repeat-x, repeat-y, no-repeat 
scroll, fixed 

0% 04, H% Vb, HV, 

left top, left center, left bottom, 
right top, right center, right bottom, 
center top, center center, center bottom 


WIDTH | STYLE COLOR 


medium, LENGTH, thin, thick 


none, hidden, dotted, dashed, solid, double, 
groove, ridge, inset, outset 

black, COLOR 

WIDTH STYLE COLOR 


same as border-width 
same as border-style 
same as border-color 
WIDTH STYLE COLOR 
same as border-width 
same as border-style 
same as border-color 
WIDTH STYLE COLOR 
same as border-width 
same as border-style 
same as border-color 
WIDTH STYLE COLOR 
same as border-width 
same as border-style 
same as border-color 


auto, default, pointer, 
help, wait, progress, move, crosshair, text, 
n-resize, s-resize, e-resize, w-resize 
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CSS Properties and Values: Content 





Content applies to all except for rows. 
padding: 0, LENGTH z 
padding-left: O, LENGTH = 
padding-right: 0, LENGTH e 
padding-top: 0, LENGTH e 
padding-bottom: 0, LENGTH E 
< 

i font: caption, icon, menu, message-box, small-caption, status-bar 

i font-family: serif, FONTLIST, sans-serif, monospace, fantasy, cursive 

i font-size: medium, LENGTH, %ParentElementFontSize, xx-small, x-small, 

smaller, small, large, larger, x-large, xx-large 

i font-style: normal, italic, oblique 

i font-variant: normal, small-caps 

i font-weight: normal, lighter, bold, bolder, 


100, 200, 300, 400, 500, 600, 700, 800, 900 


i text-decoration: none, underline, line-through, overline 
i text-transform: none, lowercase, uppercase, capitalize 


i direction: ltr, rtl 
unicode-bidi: normal, bidi-override, embed 

i line-height: normal, LENGTH, XFontSize, MULTIPLIER 

i letter-spacing: normal, LENGTH 

i word-spacing: normal, LENGTH 

i white-space: normal, pre, nowrap 

i color: #rrggbb, #rgb, rgb(RED,GREEN,BLUE), rgb(RED%,GREEN%,BLUE%) 
black, gray, Silver, white, 
red, maroon, purple, fuchsia, 
lime, green, olive, yellow, 
blue, | navy, teal, aqua, 
violet, fuschia, red, maroon, black 
wheat, gold, orange, tomato, firebrick 
lightyellow, yellow, yellowgreen, olive, darkolivegreen 
palegreen, lime, seagreen, green, darkgreen 
lightcyan, cyan, turquoise, teal, midnightblue 


lightskyblue, deepskyblue, royalblue, blue, darkblue 
whitesmoke, lightgrey, silver, gray, dimgray, darkslategray 


ActiveBorder, ActiveCaption, AppWorkspace, Background, 
ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, 
CaptionText, GrayText, Highlight, HighlightText, 
InactiveBorder, InactiveCaption, InactiveCaptionText, 
InfoBackground, InfoText, Menu, MenuText, Scrollbar, 
ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, 
ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, 
WindowText 


22 CHAPTER 1 ™ DESIGN PATTERNS: MAKING CSS EASY! 


CSS Properties and Values: Layout 





Float applies to all except cells and rows. 
E float: none, left, right 
2 
Lu 
2 Clear applies to all except inlines, inline-blocks, cells, & rows. 
El clear: none, left, right, both 
= 
Positioned applies to all except cells and rows. 
position: static, relative; absolute, fixed 
left: auto, LENGTH, %WidthOfContainingBlock 
right: auto, LENGTH, “WidthOfContainingBlock 
top: auto, LENGTH, %HeightOfContainingBlock 
bottom: auto, LENGTH, %HeightOfContainingBlock 
z-index: auto, INTEGER 
Horizontal Margin applies to all except cells and rows. 
margin: 0, LENGTH, %WidthOfContainingBlock, auto 
margin-left: 0, LENGTH, %WidthOfContainingBlock, auto 
margin-right: 0, LENGTH, %WidthOfContainingBlock, auto 
Vertical Margin applies to all except inlines, cells, and rows. 
margin: 0, LENGTH, %WidthOfContainingBlock, auto 
margin-top: 05 LENGTH, %WidthOfContainingBlock, auto 
margin-bottom: ©, LENGTH, %WidthOfContainingBlock, auto 
Width applies to all except inlines and rows. 
width: auto, LENGTH, *WidthOfContainingBlock 
min-width: 0, LENGTH, *WidthOfContainingBlock 
max-width: none, LENGTH, %WidthOfContainingBlock 
Height applies to all except inlines and tables. 
height: auto, LENGTH, “HeightOfContainingBlock 
min-height: 0, LENGTH, “HeightOfContainingBlock 
max-height: none, LENGTH, XHeightOfContainingBlock 
Content Layout applies to all except inlines, tables, and rows. 
i text-indent: 05 LENGTH, %WidthOfContainingBlock 
i text-align: left, center, right, justify 


overflow: visible, hidden, auto, scroll 
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CSS Properties and Values: Specialized 





List applies only to lists. 
i list-style: TYPE POSITION IMAGE = 
i list-style-type: disc, circle, square, none, decimal, E: 
lower-alpha, upper-alpha, lower-roman, upper-roman 2 
i list-style-position: outside,inside 2 
i list-style-image: none, url("file. jpg") B 
Table applies only to tables. 
i border-collapse: separate, collapse 
table-layout: auto, fixed 
Cell applies only to cells. 
vertical-align: baseline, bottom, middle, top 
Inline applies only to inlines and inline-blocks. 
vertical-align: baseline, LENGTH, %LineHeight, 


text-bottom, text-top, middle, top, bottom 
Page applies only to blocks and tables. 


page-break-after: auto, always, avoid 
page-break-before: auto, always, avoid 


Selectors 


* {} selects all elements 

p {} selects all <p> elements 

*.c {} selects all elements where class="c" 

p.c {} selects all <p> elements where class="c" 
#main {} selects one element where id ="main" 
a:link {} selects all unvisited links 

a:visited{} selects all visited links 

a:hover {} selects all links being hovered over 
a:active {} selects the current link being activated 
a: focus {} selects all links that have the focus 
p:first-letter {} selects first letter of all <p> elements 
p: first-line {} selects first line of all «p» elements 
p:first-child {} selects first child of all <p> elements 
#n *.c  :first-line {} descendant selector example 


#n > *.c > :first-line {} child selector example 

Hn + *.c + :first-line {} sibling selector example 

tn , *.c , :first-line {} applies independent selectors to same block of properties 
*[ title] {} selects all elements with a title attribute. 
*[title"-"WORD"] () selects all where title attribute contains "WORD". 
*[title-"EXACT MATCH OF ENTIRE VALUE"] {} selects all with exact attribute match. 
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Flexible Units of Measure 


Unit 


em 


ex 


Description 


emis the font-size assigned to an element. In the case of the font-size property, it is the 
font-size assigned to the element's parent. For example, 5em is five times the font-size. 
Ems are a useful measure when you want to size an element relative to the size of its text. 
This allows the layout of your documents to flex with the size of the text. 


You can use ems to roughly size the width of an element to fit a certain number of 
characters. You can do this by multiplying the number of characters by 0.625 to create the 
em measurement. For example, if you want an element to be 10 characters wide, you can 
set it to 6.25em. 


In Internet Explorer 7 and earlier versions, a user can use the View -» Text Size menu to 
enlarge or shrink the overall size of the text. When you assign font-size:medium to <body> 
and use ems for all font-size properties, Internet Explorer sizes text relative to the text size 
chosen by the user. This makes your document more usable to users who want to see text 
larger or smaller than normal. If you assign a fixed measurement to font-size, Internet 
Explorer uses the fixed size and ignores the text size chosen by the user. 


ex is the height of the letter "x" of an element's current font. This measurement is related 
to the em, but is rarely used. 


Fixed Units of Measure 


Unit 


in 


px 


pt 
pc 
cm 


mm 


Description 
in stands for logical inches. 


inis a "logical" inch because the actual physical size depends on the monitor and settings 
chosen by the operating system and/or user. The dot pitch of a monitor determines the 
physical size of its pixels, and thus the physical size of the logical inch. Various operating 
systems have different settings for dpi. Common values are 72 dpi (Macintosh), 75 dpi 
(Unix), 96 dpi (Windows Normal), 100dpi (Unix Large), and 120 dpi (Windows Large). 
Since the dots on a monitor do not change size, the logical inch is physically larger at 

120 dpi than at 72 dpi because the logical inch contains more dots. Thus, setting the width 
of an element to 96px is the same as setting it to 1in on Windows and 1.33in on a Mac 
running at 72 dpi. 


The problem with logical inches and all other fixed units of measure is that they do not 
scale well on systems with different dot-per-inch settings. What may seem just right on 
Windows at 96 dpi may be too large or too small on other systems. Thus, percentages or 
ems work best when cross-platform compatibility is desired. 


px stands for pixels. Pixels are useful when you want to precisely align elements to images 
because images are measured in pixels. 


pt stands for point. A point is 1/72 of alogical inch. 
pc stands for picas. A pica is 12 points or 1/6 of a logical inch. 
cm stands for logical centimeters. There are 2.54 centimeters per logical inch. 


mm stands for millimeters. There are 25.4 millimeters per logical inch. 
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Ratios Between Units of Measure at 96 dpi 


Value Pixel Point Pica Inch Millimeter 

1 pixel = 1px =0.75pt (3/4) = 0.063pc (1/16) = 0.0104in (1/96) =0.265mm = 
1 point = 1.333px (4/3) =1pt = 0.083pc (1/12) = 0.0138in (1/72) = 0.353mm 5 
1 pica = 16px =12pt =1pc = 0.1667in (1/6) =4.233mm a 
linch = 96px =72pt = 6pc =1in =25.4mm & 
1 mm = 3.779px = 2.835pt = 4.233pc = 0.039in = 1mm 





Typical font-size Values at 96 dpi 


CSS Ems Points Pixels Percent Heading HTML Physical Size 
xx-small 0.50em 6pt 8px 50% 10 pixels 
0.57em 7pt 9px 57% 12 pixels 
x-small 0.63em 7.5pt 10px 63% h6 1 12 pixels 
0.69em 8pt 11px 69% 13 pixels 
0.75em 9pt 12px 75% 2 14 pixels 
small 0.82em 9.75pt 13px 82% h5 16 pixels 
0.88em 10.5pt 14px 88% 17 pixels 
0.94em 11.25pt 15px 94% 18 pixels 
medium 1em 12pt 16px 100% h4 3 18 pixels 
1.08em 13pt 17px 108% 20 pixels 
large 1.13em 13.5pt 18px 113% h3 4 22 pixels 
1.17em 14pt 19px 117% 23 pixels 
1.25em 15pt 20px 125% 25 pixels 
1.38em 16.5pt 22px 138% 26 pixels 
x-large 1.50em 18pt 24px 150% h2 5 29 pixels 
1.75em 21pt 28px 175% 34 pixels 
xx-large 2em 24pt 32px 200% h1 6 38 pixels 
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Troubleshooting CSS 


You can use the following steps to troubleshoot a stylesheet that is not working. I listed the 
steps in the order that will most likely help you find the problem quickly. 


1. Validate the HTML document. This ensures you have no syntax problems that may 
cause a browser to interpret the structure of the document differently than you expect. 


2. Validate each CSS stylesheet. This ensures you have no syntax problems, which would 
cause one or more rules to be ignored. 
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* Make sure a proper unit of measure (UOM) follows nonzero measurements and 
that no space occurs between the number and its UOM, such as 1em or 100%. 
(line-height is an exception; it allows a nonzero measurement without a UOM.) 





* Make sure only a colon (:) and optional whitespace occurs between a property 
name and its value, such as width:100% or width : 100%. 


e Make sure a semicolon (;) closes each rule, such as width: 100%;. 


3. Review the list of CSS parsing errors using the Error Console in Mozilla browsers. 
Browsers ignore each rule that has a parsing error, but unlike many other program- 
ming languages, they continue parsing and applying the remaining rules. 


4. Verify a selector is selecting all the elements you think it should be selecting, and only 
those elements. You can easily see the results of a selector by putting outline:2px 
solid invert; in the selector. (Note that outline does not work in Internet Explorer 7, 
but border does.) 


5. Look carefully at the cascade priority of each rule that fails to be applied. Cascade pri- 
ority takes precedence over document order. For example, #myid{color: red; } takes 
priority over *.myclass(color:blue;], and #myid *.myclass{color: green; } takes pri- 
ority over both—no matter where they occur in a stylesheet and no matter if they 
occur in a stylesheet that was loaded before or after the current stylesheet. I find this to 
be a common cause of trouble because a rule with higher cascade priority can be any- 
where in any stylesheet. Assuming you have already validated your stylesheet, you can 
often tell when cascade priority is the problem when some properties in a selector 
work, but others do not—no matter what values you use. This typically happens when 
properties are being overridden by another rule with a higher cascade priority. You can 
usually verify this is the case by adding ! important after a property. ! important gives a 
property a higher priority than all non-! important properties. If ! important makes a 
property work, you probably have a cascading priority problem. 


6. Verify the case of elements, classes, and IDs in the stylesheet exactly matches their 
case in the HTML document. This is important because XHTML is case sensitive. You 
may want to use lowercase values at all times to avoid accidental mismatches. 


7. 


10. 


11. 


12. 
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Check shorthand properties carefully to see whether you left out any property values 
when you created the rule. The problem with shorthand properties is that they assign 
values to all properties for which they are shorthand—even if you set only one value! 
For example, background:blue; sets background-color to blue, and it also sets 
background-image to none, background-repeat to repeat, background-attachment to 
scroll, and background-position to 0% 0%. If a rule containing background:blue; has a 
higher cascading priority than an overlapping rule that assigns background-image to 
url("image. jpg"), you will not see the background image because the shorthand 
property background:b1ue; overrides it and sets background-image to none. 


* Shorthand properties include margin, border, padding, background, font, and 
list-style. 


* fontisa particularly troublesome shorthand property because it combines so 
many properties into one, and all these values are inherited! These properties 
include font-family, font-size, font-weight, font-variant, font-style, and 
line-height. Remember that assigning even one value to font, such as font:1em;, 
causes the browser to set the default values for all these properties! 


. Verify a browser loads all your stylesheets. You can make sure each one is referenced 


through a «link» statement within the «head» section of your HTML document, or 
through @import statements in stylesheets. If you are not sure a stylesheet is being 
loaded, you can place a unique rule in the stylesheet to see whether it gets applied. 
Such a rule would be something obvious, like *{border:1px solid black;]. 


Avoid using @import statements. If you use @import statements, verify they occur as 
the first items in the stylesheet to ensure they have a lower priority than the rules in 
the stylesheet. 


Verify stylesheets are loaded in the order you want by listing «link» statements and 
@import statements in order of ascending priority. Rules at the same level in the cascad- 
ing order are overridden by rules in stylesheets linked or imported later. But remember 
that rules with a higher cascading priority always override rules with a lower priority 
no matter what order the rules occur in a stylesheet or whether they occur in 
stylesheets linked or imported later. 


Verify the server sends text/css as the Content-Type header for CSS stylesheets. 
Mozilla browsers refuse to use a stylesheet unless it has a content type of text/css. You 
can view the HTTP headers in Mozilla browsers by using the Web Developer Toolbar 
and selecting the menu option View Response Headers. 


Remove HTML elements that may have been put in a CSS stylesheet, such as «style». 
Also make sure no child elements have been accidentally placed inside the «style» 
element, which is inside the head of the HTML document. 
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Normalized Stylesheet 


Because each browser has slightly different default settings, you may want to build rules into 
your stylesheets to define baseline settings for each element. For example, different browsers 
assign the «h1» element to different sizes and margins. By assigning your own size and mar- 
gins to «h1», you can standardize its appearance in all browsers. 

The simplest approach (and the easiest approach to maintain) is to create a baseline set 
of rules for all elements and to load those rules in the first stylesheet you attach to a docu- 
ment. You can load a small set of rules that reset all elements to the simplest of styles as shown 
in Listing 1-2. Or you can load a more extensive set of rules that create a standard style for 
your site, such as those shown in Listing 1-3. You can find standard sets of baseline rules 
on the Internet, such as Yahoo's YUI Reset CSS rules (see http: //developer.yahoo.com/ 
yui/reset/). 

Loading a separate baseline stylesheet affects the speed at which your page is rendered 
(see the sidebar “How Fast Will Your Page Load?”). Thus, for performance reasons, you may 
want to combine stylesheets or move styles into the «style» section of the HTML document. 


Listing 1-2. Simple Baseline Stylesheet (Similar to Yahoo's YUI Reset CSS) 


body, div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre, form, fieldset,input,p, 
blockquote,th,td { margin:0; padding:0; } 

table { border-collapse:collapse; border-spacing:0; } 
fieldset,img { border:0; } 

address, caption, cite, code, dfn, em, strong, th, var 

{ font-style:normal; font-weight:normal; } 

ol,ul ( margin:1em 0; margin-left:40px; padding-left:0; } 
ul { list-style-type:disc; } 

ol { list-style-type:decimal; } 

caption,th { text-align:left; } 

h1,h2,h3,h4,h5,h6 { font-size:100%; } 


HOW FAST WILL YOUR PAGE LOAD? 


How fast your document renders is important. A web page that renders within 0.5 seconds is considered 
instantaneous; 1 second is fast; 2 seconds is normal; more than 2 seconds becomes noticeable; and about 
6 seconds is all most broadband users will tolerate. As a rule of thumb, the latency involved in looking up 
each file typically takes 0.1 to 0.5 seconds—this is on broadband connections and does not include the time 
it takes to actually download a file. Because of latency, a fast page can typically load three extra files, such as 
one stylesheet, one JavaScript file, and one image, and a normal page can load about seven extra files. 

To help with performance, a browser caches files. This may help on subsequent downloads, but it does 
not help the first time a page downloads. Furthermore, cached files only speed performance when the server 
sets their expiration date to expire in the future. When the refresh date on a cached file expires, a browser 
asks the server whether the file has changed. This takes about 0.1 to 0.5 seconds per file—even if the file 
has not changed and does not need to be downloaded again. Thus, it is important to set the expiration date 
as far in the future as you dare. How far in the future depends on how often you expect the file to change on 
the server. The problem is that if you change the file on the server before the expiration date, users will not 
get the updated file because browsers will not bother asking for it. 
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Listing 1-3. Complete Baseline Stylesheet 


/* BLOCK ELEMENTS */ 
html, div, map, dt, form { display:block; } 


body { display:block; margin:8px; font-family:serif; font-size:medium; } 
p, dl { display:block; margin-top:1em; margin-bottom:1em; } 
dd { display:block; margin-left:40px; } 


address { display:block; font-style:italic; } 

blockquote { display:block; margin:1em 40px; } 

h1 { display:block; font-size:2em; font-weight:bold; ^ margin:0.67em 0; 

h2 ( display:block; font-size:1.5em; font-weight:bold; ^ margin:0.83em 0; 

h3 ( display:block; font-size:1.125em;  font-weight:bold; margin:1em 0; 

h4 ( display:block; font-size:1em; font-weight:bold; ^ margin:1.33em 0; 
0; 
0; 
0; 
Jj 
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h5 ( display:block; font-size:0.75em; ^ font-weight:bold; ^ margin:1.67em 
h6 { display:block; font-size:0.5625em; font-weight:bold; ^ margin:2.33em 
pre{ display:block; font-family:monospace; white-space:pre; margin:1em 

hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; 


We 


/* TABLE ELEMENTS */ 

table — ( border-spacing:2px; border-collapse:separate; 
margin-top:0; margin-bottom:0; text-indent:0; ] 

caption ( text-align:center; ] 

td ( padding:ipx; } 

th { font-weight:bold; padding:1px; j 

tbody, thead, tfoot { vertical-align:middle; } 


/* INLINE ELEMENTS */ 

strong ( font-weight:bold; } 

cite, em, var, dfn ( font-style:italic; ] 

code, kbd, samp ( font-family:monospace; } 

ins ( text-decoration:underline; ) 

del { text-decoration:line-through; } 

sub ( vertical-align:-0.25em; font-size:smaller; line-height:normal; } 
sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; } 
abbr[title], acronym[title] { border-bottom:dotted 1px; } 


/* LIST ELEMENTS */ 

ul { list-style-type:disc; margin:iem 0; margin-left:40px; padding-left:0; } 
ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0; } 
/* remove top & bottom margins for nested lists */ 

ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl 

{ margin-top:0; margin-bottom:0; } 

/* use circle when ul nested 2 deep */ 

ol ul, ul ul ( list-style-type:circle; } 

/* use square when ul nested 3 deep */ 

ol ol ul, ol ul ul, ul ol ul, ul ul ul ( list-style-type:square; } 


Tip You can view Mozilla Firefox's internal default stylesheet using resource: //gre/res/html.css. 


CHAPTER 2 


HTML Design Patterns 


This chapter explores HTML only as it relates to CSS. It contains design patterns that are 
essential for styling a document with CSS. It explores HTML at a high level with an eye toward 
explaining how elements can be put to use structurally and semantically. Each design pattern 
in this book is created using structural and semantic elements combined with CSS. There 

are four major types of elements used in design patterns: structural block, terminal block, 
multi-purpose block, and inline elements. Understanding these types of elements is key to 
understanding the design patterns in this book and essential to creating your own. 


Chapter Outline 


HTML Structure shows how HTML elements work together to create a document. 


XHTML shows how to mark up a document with valid XHTML. It also points out why 
using valid XHTML makes styling with CSS more reliable. 


DOCTYPE shows how to use document types to validate the way documents are coded, 
and it explores what document types work best for CSS and HTML. 


Header Elements shows how to create metadata about a document and how to link a 
document to supporting documents and related documents. 


Conditional Stylesheet shows how to load a stylesheet to fix problems unique to 
Internet Explorer. 


Structural Block Elements shows how to create structural meaning in a document. 


Terminal Block Elements shows how certain blocks have semantic meaning because 
they contain content instead of other blocks. 


Multi-purpose Block Elements shows how certain elements can be used for block 
structure and semantic meaning. 


Inline Elements shows how styles can bring out the meaning of semantic markup. 


Class and ID Attributes shows how CSS relies on class and id attributes to select 
elements. It also shows how the class attribute can add meaning to an element. 


HTML Whitespace shows how to make whitespace work for you instead of against you. 
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HTML Structure 


Container 
<html> 
<head> 
<body> 
<noscript> 
<div> 
<h1> 
<p> 
«ol» or «ul» 
<li> 
<dl> 
<dt> 
<dd> 
<table> 
<caption> 
<colgroup> 
<col> 
<thead> 
<tfoot> 
<tbody> 
<tr> 
<th> 
<td> 
<form> 
<label> 
<input> 
<textarea> 
<select> 
<optgroup> 
<option> 
<button> 


<address> 


Contents 

<head> <body> 

«title» & («meta» | «link» | <object> | «script» | <style> ) 
«noscript» «div» 

inline | block 

inline | block 

inline 

inline 

<li> 

inline | block 

<dt> <dd> 

inline 

inline | block 

<caption> <colgroup> <thead> <tfoot> <tbody> 
inline 

<col> 

null 

<tr> 

<tr> 

<tr> 

<th> <td> 

inline | block 

inline | block 

inline | block (excluding <form>) 
inline (excluding «label») 

null 

text 

«optgroup» | «option» 

«option» 

text 

inline | block (excluding «a», «form», controls) 


inline 


HTML Structure 


Container 

«a» 

«img» 

«map» 
«area» 

«object» 
«param» 

«br» 

null 

text 

block 


structural block 


multi-purpose block 
terminal block 


inline 
inline-semantic 


importance 

phrase 

word 

char 
inline-flow 
inline-block 

replaced 


controls 
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Contents 

inline (excluding «a») 

null 

«area» 

null 

«param» | inline | block 

null 

null 

No content. Single tag with closing slash (e.g., «br /»). 
Unicode text including HTML entities that are parsed and replaced. 
Includes the following three types of block elements: 


«ol» «ul» «dl» «table» «tr» «thead» «tfoot» «tbody» 
«colgroup» «col» 


«div» «li» «dd» «td» «th» «form» «noscript» 
«hi» «p» «dt» «caption» «address» «blockquote» 


Includes the following three major types and six minor types of 
inline elements: 


Includes text intermingled with zero or more of the following 
elements: 


«span» «em» «strong» 

«a» «cite» «code» «kbd» «samp» «var» 
«acronym» «abbr» «dfn» 

«sub» «sup» 

«br» «bdo» 

Includes replaced elements and form controls: 
«img» «object» «embed» «iframe» 


«input» «textarea» «select» «button» «label» 


Additional elements are included in the strict HTML 4.01 specification, but I did not list 
them in the preceding table because they have little semantic or structural meaning, are rarely 
used, or have quirky implementations. The following elements style text: «tt», «i», «b», «big», 
«small». The «pre» element preserves whitespace, but it cannot contain images, objects, sub- 
scripts, or superscripts. The «q» element automatically inserts quotes differently depending 
on the browser. The «ins» and «del» elements mark elements as inserted or deleted. Frames 
can cause problems for search engines and users: «iframe», <frameset>, «frame», and 
«noframe». Internet Explorer 7 will not remove built-in styles from «hr», <fieldset>, and 
«legend». Finally, «base» changes the root of all links in your document—use it only if you 
fully understand it, or it may break all your links. 


(Continued) 
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HTML Structure (Continued) 


E HTML Structure - Microsoft Internet Explorer 


: Eile Edit View Favorites Tools Help 


HTML Structure 


Paragraph 


. Ordered List Item 
. Ordered List Item 


* Unordered List Item 
e Unordered List Item 


Definition Term 

Definition Term 
Definition Data 
Definition Data 


Table Caption 
rowl-coll row1-col2 
row2-coll row2-col2 
row3-coll row3-col2 


|Textarea p ] 
© Radiol © Radio2 [V] Checkbox1 Input-text | Type here Select |Item2 — | Textarea | 


Submit | | Reset || Button 





Division within a Division Link span em strong cite code kbd samp var acronym abbr dfi -p “UP sdrawkcab 


cssDesignPatterns.com 


address 


HTML 


«IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd"» 


«html xmlns-"http://www.w3.0rg/1999/xhtml" xml:lang-"en" lang="en" > 


«head»«title»HTML Structure«/title» 
«meta http-equiv-"Content-type" content-"text/html; charset-utf-8" /» 
«link rel="stylesheet" href-"site.css" media="all" type-"text/css" 
«link rel="stylesheet" href-"page.css" | media-"all" type-"text/css" 
«link rel="stylesheet" href-"print.css" media="print" type="text/css" 
<!--[if lte IE 6]> 
<link rel="stylesheet" href="ie6.css" media-"all" type-"text/css" 
<![endif]--> 
</head> 





/> 
/> 
/> 


/> 
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HTML Structure (Continued) 


«body» 

«noscript»Show this when script cannot run.«/noscript» 
«div» 

<h1>HTML Structure</h1> 

<p>Paragraph</p> 


<ol> <li>Ordered List Item</li> <li>Ordered List Item</li> </ol> 

<ul> <li>Unordered List Item</li> <li>Unordered List Item</li> </ul> 

«dl» «dt»Definition Term</dt> «dt»Definition Term«/dt» 
«dd»Definition Data«/dd» «dd»Definition Data«/dd» «/dl» 


<table><caption>Table Caption</caption> 
<colgroup> <col /> <col /> </colgroup> 
<thead><tr><td>row1-col1</td> <td>row1-col2</td></tr></thead> 
«tfoot»«tr»«td»row3-coli«/td» «td»row3-col2«/td»«/tr»«/tfoot» 
«tbody»«tr»«td»row2-coli«/td» «td»row2-col2«/td»«/tr»«/tbody»«/table» 


«form id="form1" method="post" action-"http://www.tipjar.com/cgi-bin/test" > 
<input type="hidden" title-"input hidden" name="hidden" value-"Secret" /> 


«input id="radio1" name="radios" type="radio" value="radio1" checked-"checked" /» 
«label for="radio1">Radio1</label> 


«input id-"radio2" name="radios" type="radio" value="radio2-pushed" /> 


<label for="radio2">Radio2</label> 


<input id="xbox1" name="xbox1" type="checkbox" value-"xboxi" checked="checked" /» 


<label for="xbox1">Checkbox1</label> 


<label for="inputtext">Input-text</label> 
«input id="inputtext" name="inputtext" type="text" value-"Type here" size="14" /» 








<label for="select1">Select</label> 

«select id="select1" name="select" size="2" > 

«option selected-"selected" value="item1" >Item1</option> 

<option value="item2" >Item2</option> </select> 


«label — for-"textarea" >Textarea</label> 
«textarea id-"textarea" name-"textarea" rows="2" cols="10" >Textarea</textarea> 


«input type="submit" id-"submiti" name-"submiti" value-"Submit" /» 

«input type-"reset" id-"reseti" name="reset1" value-"Reset" /» 

«button type="submit" id-"buttoni" name="button1" value="Button1" »Button«/button» 
«/form» 


(Continued) 
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HTML Structure (Continued) 


HTML (Continued) 


«div»Division within a Division «a id-"link1" href-"left.html"»Link«/a» 

<img src-"left-right.gif" width="20" height="20" usemap="#map1" alt-"alt text" /» 
«map id-"mapi" name-"mapi"» 

«area href-"left.html" alt="left" shape="rect" coords="0,0,10,20" /> 

«area href-"right.html" alt-"right" shape="rect" coords="10,0,20,20" /></map> 


<span>span</span> 
<em>em</em> 
<strong>strong</strong> 
<cite>cite</cite> 
<code>code</code> 
<kbd>kbd</kbd> 

«samp»samp« /samp» 
<var>var</var> 
<acronym>acronym</acronym> 
<abbr>abbr</abbr> 
<dfn>dfn</dfn> 
<sub>sub</sub> 
«sup»sup«/sup» 

«bdo dir-"rtl"»backwards«/bdo» 
«br /» 


«object classid-"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 

codebase-"http: //fpdownload.macromedia.com/pub/shockwave/cabs/flash/we 
swflash.cabitversion-7,0,0,0" 

width="400" height="50" id-"cssdesignpatterns" align="middle"> 

<param name="movie" value="cssdesignpatterns.swf" /> 


<object type-"application/x-shockwave-flash" data="cssdesignpatterns. swf" 
width="400" height="50"> <param name="movie" value="movie.swf" /> 
<img src="cssdesignpatterns.gif" alt="cssdesignpatterns.com" /> 

</object> 
</object> 

</div> 

<address>address</address> 

</div> 


</body> 
</html> 


CSS 


/* There are no CSS styles attached to this document. */ 
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HTML Structure (Continued) 


Problem 


Solution 


Pattern 


Example 


Related to 


See also 


You want to know how HTML elements work together to create an HTML 
document. 


HTML is a strict hierarchical nesting of elements. Elements may be nested within 
each other, but they cannot overlap each other. HTML organizes elements into 
three major categories: structural, block, and inline elements. 


The core structural elements are <html>, <head>, and <body>. Information about 
a document goes in <head> and document content goes in <body>. Header 
elements are covered in the Header Elements design pattern discussion. 


There are three types of block elements: structural, multi-purpose, and terminal. 
These are covered in the following design pattern discussions: Structural Block 
Elements, Terminal Block Elements, and Multi-purpose Block Elements. 


There are three major types of inline elements: semantic, flow, and inline-block. 
These are covered in the Inline Elements design pattern discussion. 


HTML Core Structure 
<!DOCTYPE DOCUMENT TYPE DEFINITION USED FOR VALIDATION > 
<html> 
<head> METADATA </head> 
<body> CONTENT </body> 
</html> 


The example contains the simplest expression of each common HTML element. 


The concept behind the <object> element is that its content (except for its 
<param> elements) is rendered when the object itself cannot be rendered. The 
object element in the example is an embedded Flash object. Inside it, I 
embedded another Flash object to be rendered in case the parent object fails. 
The parent object fails in Firefox 2 and other Netscape browsers because these 
browsers do not support the classid attribute that Internet Explorer requires. 
Since the parent object fails, Firefox renders the child object instead. Inside the 
child object, I inserted an image that will be shown when its parent child object 
does not work. Lastly, if the image is not available, a browser displays its alt text. 
Fallback content is a design principle used by replaced elements, such as 
<object> and <img>, so that something can be displayed when a browser 
cannot replace the element. 


The syntax of <object> element attributes and <param> elements varies with each 
type of object. Each vendor defines the syntax for its objects. 


The article “Bye Bye Embed” by Elizabeth Castro on A List Apart 

(www. alistapart.com/articles/byebyeembed) shows how to embed videos in 
a document using only <object> elements. If you have trouble with her 
techniques, the traditional approach is to use the <embed> object as a fallback 
to <object>. <embed> works well in Firefox and other Gecko-based browsers 
but is not valid HTML. 


Header Elements, Structural Block Elements, Terminal Block Elements, Multi- 
purpose Block Elements, Inline Elements; Structural Meaning, Visual Structure 
(Chapter 13) 


www.cssdesignpatterns.com/html-structure 
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XHTML 


7) XHTML - Mozilla Firefox DER) 


File Edit View History Bookmarks Tools Help 


©) HTML - Mozilla Firefox BAE 


File Edit View History Bookmarks Tools Help 


HTML 


Paragraph 
Break 


XHTML 


Paragraph 


Break 1. Ordered List Item 


2. Ordered List Item 
1. Ordered List Item 


2. Ordered List Item 


Definition Term 
Definition Data 


Definition Term 
Definition Data 
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Valid XHTML 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd"» 





«html xmlns-"http://www.w3.0rg/1999/xhtml" xml:lang-"en" lang="en"> 
«head»«title»XHTML«/title» 
«meta http-equiv-"Content-type" content-"text/html; charset-utf-8" /» 
«link rel-"stylesheet" href-"page.css" media-"all" type-"text/css" /» 
«/head» 
«body» 
«hi»XHTML«/hi» <p>Paragraph</p> «br />Break 
«ol» <li>Ordered List Item</li> <li>Ordered List Item</li> </ol> 
«dl» «dt»Definition Term«/dt» «dd»Definition Data«/dd» «/dl» 
«/body» 
«/html» 


Valid HTML 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3.org/TR/html4/loose.dtd" > 


«html lang-en » 
«head»«title»HTML«/title» 
«meta http-equiv-Content-type content-"text/html; charset-utf-8" » 
«link rel-stylesheet href-page.css media-all type-"text/css" » 
«body» 
«hi»HTML«/hi» <p>Paragraph <br>Break 
<ol> <li>Ordered List Item <li>Ordered List Item </ol> 
«dl» «dt»Definition Term «dd»Definition Data — «/dl» 


XHTML 


Problem 


Solution 


Advantages 


Related to 
See also 
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You want to create a document using XHTML. 


XHTML is similar to HTML but has a few differences. The first change is the 
DOCTYPE. As shown in the example, XHTML and HTML have different document 
types. DOCTYPEs are discussed in the next design pattern. 


XHTML is case sensitive, and HTML is case insensitive. XHTML requires all tags 
and attributes to be lowercase (e.g., <html> instead of <HTML>). CSS selectors are 
case sensitive in XHTML! In XHTML, the case of class or id values must match 
before they will be selected by CSS! For example, the selectors #test and *.test 
select <h1 id="Test" class="TEST"> in HTML, but notin XHTML. For this 
reason, I recommend always using lowercase attribute values and tag names 

in XHTML and CSS. 


XHTML requires the <html> tag to include the xmlns attribute with the value of 
"http: //www.w3.org/1999/xhtml". XHTML requires the xml : lang attribute to 
be present each time the HTML lang attribute is used, such as xml: lang="en" 
langz"en". 


XHTML requires all elements to have start and end tags and all attributes to be 
enclosed in quotes and to have a value. HTML does not. 


HTML lets you omit the start tags for <html>, «head», <body>, and <tbody>. HTML 

lets you omit end tags for <html>, «head», <body>, <p>, «li», <dt>, <dd>, <tr>, «th», 
and «td». A browser implies their presence in HTML. In XHTML, a document will 
not validate if these tags are omitted. 


HTML prohibits end tags for elements that must always be empty: «meta», 
«linlo, «base», «br», «hr», «area», «img», «param», «input», «option», and «col». 
XHTML requires end tags for all elements. Thus, a valid XHTML document 
containing one of these elements can never be a valid HTML document and vice 
versa. There is a compromise that works in HTML browsers because they do not 
require documents to be valid HTML. You can use the XML shorthand notation 
for an empty element as long as it includes a space before the closing slash and 
less-than sign. This works as follows: «meta /», «link /»,«base /»,«br /», 

«hr /»,«area />, <img /»,«param /»,«input />, <option /»,and «col /». 

You should use a separate closing tag for all other empty elements, such as 
«span»«/span». 


The strict coding requirements of XHTML identify the structure of a document 
more clearly than HTML. In HTML, a browser assumes the location of a missing 
end tag to be the start tag of the next block element. In the example, «br /» 

is rendered after the paragraph in the XHTML document and as part of the 
paragraph in the HTML document. This is why there is an extra line of 
whitespace in the XHTML part of the example. 


A valid and unambiguous structure is essential when you use CSS to style a 
document because CSS selectors select elements based on their structure. 
For this reason, I use valid XHTML in all my projects, including this book. 


DOCTYPE 


www. cssdesignpatterns .com/xhtml 
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DOCTYPE 


HTML 


<!-- The following DOCTYPEs place the browser in almost-standards mode. 
The first one is for XHTML, and the second one is for HTML. 
This book uses the first one in all its examples. --» 


«IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtmli-transitional.dtd"» 


«IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3.org/TR/htm14/loose.dtd"» 


CONTENT TYPE VS. DOCTYPE 
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Web servers identify each document they serve with a MIME content type. MIME stands for Multipart 
Internet Mail Extensions. The content type is identified in the HTTP header for the document. A browser deter- 
mines how to process a document based on its MIME content type. When it gets a document with a content 
type of "text/html", it renders the document as HTML. 

According to the W3C's Note titled “XHTML Media Types" (www. w3 . org/TR/xhtml-media-types/), 
a web server may serve XHTML with one of the following three content types: 





* An XHTML document may be served as "text/html" as long as you do not want the browser to treat 
the document as XML and you do not include content from other XML namespaces, such as MathML. 
A browser receiving an XHTML document with this content type treats the document as HTML. 


e XHTML should be served as "application/xhtmlexml". Unfortunately, Internet Explorer 7 and 
earlier versions refuse to display pages served this way. 


e XTHML may be served as "application/xml" or "text/xml". Unfortunately, Internet Explorer 7 
and earlier versions recognize such a document as generic XML, which means they ignore all XHTML 
semantics. This means links and forms do not work, and it takes much longer to render the document. 


A Gecko browser (such as Firefox 2) renders a document served with an XML content type only after it 
has completely downloaded and has absolutely no coding errors. It also renders the document in strict mode 
regardless of its DOCTYPE (see www.mozilla.org/docs/web-developer/faq.htmlitaccept). 

At the current time, the most reliable content type for serving XHTML web pages is " text/html". This 
tells a browser to render a document as HTML. This approach is supported by the W3C, and it works well in 
all major browsers. It works because browsers do not validate HTML. They parse web pages in a way that 
allows them to display any version of HTML and XHTML—including documents containing errors. Contrast 
this with how a browser processes an XHTML document where the rules of XML prohibit it from rendering 
an entire XHTML document when it has an error—even the tiniest error created by an accidental typo! 

Such precision is essential for computer-to-computer transactions, but it is not good for human-generated 
web pages. 
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DOCTYPE 


Alias Metadata Declaration 


Problem You want to declare the type of your document so you can validate it against a 
Document Type Definition (DTD). You want to ensure your document is valid. 
You want to ensure web browsers follow the same rules in rendering your 
document. 


Solution The «!DOCTYPE» prolog identifies the type and version of HTML or XHTML in 
which the document is coded. In technical terms, «!DOCTYPE» specifies the type 
of document and the DTD that validates the document. The W3C provides a free 
online service at http://validator.w3.org/ that you can use to validate your 
documents. 


All HTML and XHTML code should be validated. This verifies the code contains 
no coding errors. If there are errors, CSS selectors may fail to select elements as 
expected or may even select elements unexpectedly. 


There are benefits to using XHTML. Validated XHTML documents are well 
formed and have unambiguous structure. You can also use XSLT and XQUERY 
processors to extract content and rearrange documents. 
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There are two additional varieties of DOCTYPEs: strict and transitional. Strict 
removes all presentational elements and attributes, and transitional allows 
them. I do not recommend presentation elements and attributes, but the strict 
DOCTYPE may be too strict for some needs. For example, it prohibits the start 
attribute in «ol» and the value attribute in «li», which are the only available 
means to control the numbering of an ordered list. The strict DOCTYPE also 
prohibits «iframe». 





Most important to CSS, browsers use «!DOCTYPE» to determine how closely they 
will follow the CSS standard when they render the document. There are two basic 
modes: quirks and standards. In quirks mode, browsers do not follow the CSS 
standard, which makes this mode undesirable for styling with CSS. In standards 
mode, they follow the CSS specification. 


To complicate matters, Internet Explorer in strict mode violates a part of the CSS 
spec by not aligning images in table cells to the baseline. It does this to remove 
the baseline space below images so that sliced images in tables work as expected. 
The other major browsers have a third mode called almost-standards mode that 
emulates this nonstandard behavior. 


The standards mode of Internet Explorer and the almost-standards mode of 
the other major browsers are the most compatible modes. There are two main 
<!DOCTYPE> declarations that trigger this level of compatibility: one for XHTML 
and one for HTML. They are listed in the example on the left. You can find a 
complete list of DOCTYPEs at http: //hsivonen.iki.fi/doctype/. 


Location <!DOCTYPE> must be the first item in an HTML document. There must be only 
one <!DOCTYPE> per document. You must not precede this DOCTYPE with an 
XML declaration, such as <?xml version="1.0" ?>, or Internet Explorer 6 will 
trigger quirks mode. 


Related to XHTML 


See also Www. Ccssdesignpatterns.com/doctype 
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Header Elements 


HTML 


«IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtmli-transitional.dtd"» 


«html xmlns-"http://www.w3.0rg/1999/xhtml" xml:lang-"en" lang-"en" » 


«head» 
«title»Header Elements«/title» 


«meta http-equiv-"Content-type" content-"text/html; charset-utf-8" /» 


<!-- Include links to stylesheets --> 

<link rel="stylesheet" href="site.css" ^ media-"all" type="text/css" /> 
<link rel="stylesheet" href="page.css" ^ media-"all" type="text/css" /> 
<link rel="stylesheet" href="print.css" media="print" type="text/css" /> 
<!--[if lte IE 6]> 

<link rel="stylesheet" href="ie6.css" media-"all" type-"text/css" /» 
<![endif]--> 
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<!-- Optionally include alternate stylesheets that the user can apply. --> 
<link rel="alternate stylesheet" type="text/css" title="cool" href="cool.css" /> 
<link rel="alternate stylesheet" type="text/css" title-"hot" href="hot.css" /> 


<!-- Optionally include style rules that apply only to this page. --> 
<style type="text/css" media="all"> 
body { margin:Opx; padding:20px; padding-top:Opx; width: 702px; 
font-family:verdana,arial,sans-serif; font-size:medium; } 
h1 { margin:10px 0 10px 0; font-size:1.9em; jJ 
«/style» 


<!-- Optionally link to a JavaScript file. --» 
«script type-"text/javascript" src="script.js" ></script> 


<!-- Optionally include JavaScript that applies only to this page. --> 
«script type-"text/javascript" »«!-- 

alert("Hello World!"); 

--></script> 


</head> 


«body» <h1>Header Elements«/hi» </body> 
</html> 
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Header Elements 


Problem 


Solution 


Pattern 


Location 
Related to 
See also 


You want to add metadata to a document. You also want to link the document 
to stylesheets and JavaScript files. You also want to improve performance by 
embedding CSS rules and JavaScript inside the page. 


You can use «link rel-"stylesheet" type-"text/css" /»to link stylesheets to a 
document. You can use href="URI" to specify the URI of the stylesheet. You can 
use media-"all" to apply a stylesheet to all devices. You can use media-"print" to 
apply a stylesheet only when printing. This allows you to hide navigational bars, 
remove backgrounds, reset inverse color schemes (like white text on a black 
background) to normal black text on a white background, and so forth. You can 
use media-"handheld" to apply a stylesheet to handheld devices only. You may 
find this impractical because styles that work on one handheld device may be 
ignored or not work at all on another. Few browsers have implemented the 
following media types: "tty", "tv", "projection", "braille", and "aural". 


You can use «link rel="alternate stylesheet" /» to provide a user with 
alternate stylesheets. Browsers like Firefox 2 and Opera 9 put alternate style- 
sheets in a drop-down list and allow users to select and apply one alternate 
stylesheet at a time to a document. Since most web sites do not provide alternate 
stylesheets and since there is no visual indication that they are available, few 
users look for them or use them. Thus, sites that supply alternate stylesheets 
often put buttons or menus in the document and link them to JavaScript that 
switches between alternate stylesheets. 


You can embed styles in the «style» element. These should be styles specific 
only to the current document. Styles that are used for more than one document 
should be contained in external stylesheets. You may find that putting styles 
directly in a document greatly speeds the rendering of the document because a 
browser has fewer files to download. You may also find that this increases the 
amount of work it takes to maintain a web site. 


Other elements are common in «head», such as «title», «meta», and «script». 
Ihave included these elements in the example, but their usage is beyond the 
scope of this book. 


HTML 

«head» 

«link rel-"stylesheet" href-"FILE.CSS" 
media-"ALL PRINT HANDHELD" type="text/css" /» 

«link rel-"alternate stylesheet" type-"text/css" 
title-"NAME TO SHOW USER" href="FILE.css" /» 

«style type="text/css" media="all"> STYLES </style> 

</head> 


«linlo, «style», «title», «meta», and «script» belong in <head>. 
HTML Structure, Conditional Stylesheet 


www. cssdesignpatterns.com/ 
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Conditional Stylesheet 


zm 
=} Conditional Stylesheet - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Conditional Stylesheet 


In Internet Explorer 6, this box has a border and background. 





Rendered in Firefox 2 without the conditional stylesheet 


E Conditional Stylesheet - Microsoft Internet Explorer 
File Edit View Favorites Tools Help 





Conditional Stylesheet 
In Internet Explorer 6, this box has a border and background. 





Rendered in Internet Explorer 6 with the conditional stylesheet 


HTML 


«html xmlns-"http://www.w3.0rg/1999/xhtml" xml:lang-"en" lang-"en" » 


<head><title>Conditional Stylesheet«/title» 

«meta http-equiv-"Content-type" content-"text/html; charset-utf-8" /» 

<link rel="stylesheet" href="page.css" ^ media-"all" type="text/css" /> 
«1--[if lte IE 6]> 

<link rel="stylesheet" href="ie6.css" media-"all" type="text/css" /» 
«I [endif]--» 
«/head» 


«body» 
«hi»Conditional Stylesheet«/hi» 
«p class-"test"»In Internet Explorer 6, this box has a border and background.«/p» 
«/body» 
«/html» 
CSS page.css 


*.test ( font-size:18px; ) 


CSS ie6.css 


*.test ( border:2px solid black; background-color:gold; ) 
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Conditional Stylesheet 


Problem 


Solution 


Pattern 


Limitations 


Variations 


Related to 
See also 


You want one set of styles to be applied to Internet Explorer and another set to be 
applied to other browsers. 


You can use Microsoft Internet Explorer's conditional comments to load a 
stylesheet created exclusively for Internet Explorer. You can place a conditional 
comment in «head» after all links to other stylesheets. Inside the conditional 
comment, you can place a link to a stylesheet. I call this the conditional 
stylesheet. Since the conditional stylesheet comes last, it overrides previously 
loaded styles. 


You can create a separate conditional stylesheet for Internet Explorer 6, and if 
necessary you can create one for Internet Explorer 7. You can include styles in 
this stylesheet to compensate for different behaviors and bugs. 


The following pattern loads two conditional stylesheets. The first is for Internet 
Explorer versions 6 and earlier. The second is for Internet Explorer 7 only. 
Internet Explorer 7 fixes most of the bugs in Internet Explorer 6, but there are 
still a number of CSS features that it does not implement, such as the content 
property. 
HTML 
<!--[if lte IE 6]» 
«link rel-"stylesheet" href-"ie6.css" media-"all" 
type-"text/css" /» 
<![endif]--> 
<!--[if IE 7]> 
«link rel-"stylesheet" href-"ie7.css" media-"all" 
type-"text/css" /» 
<![endif]--> 


Conditional stylesheets only apply to Internet Explorer. This is unfortunate 
because they are a good way to work around browser-specific problems. 
Fortunately, there are few problems in other browsers. I do not recommend CSS 
hacks because they rely on parsing bugs in a browser’s CSS engine. When these 
bugs get fixed, the hack no longer works. For this reason, I do not use or discuss 
CSS hacks in this book. In other words, all the design patterns in this book work 
without hacks. 


To target different versions of Internet Explorer, you can change the operator 
and version in the conditional comment. For example, you can use 
<!--[if lt IE 5]» or«!--[if IE 7]». 


The following operators are available: 1te (less than or equals), 1t (less than), 
gt (greater than), or gte (greater than or equals). You can omit the operator for 
an equals comparison, such as <!--[if IE 7]». 


If another browser ever implements conditional comments, you can replace IE 
with the constant that identifies that browser. 


Header Elements 


www. Ccssdesignpatterns.com/conditional-stylesheet 
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Structural Block Elements 


HTML Pattern 


«1-- Ordered List --> 
«ol» 
<li> </li> 
<li> One or more list items... </li> 
</ol> 


<!-- Unordered List --> 
<ul> 
<li> </li> 
<li> One or more list items... </li> 
</ul> 


«1-- Definition List --> 


«dl» 
«dt» «/dt» 
«dt» One or more definition terms... «/dt» 
«dd» «/dd» 
«dd» One or more definitions... «/dd» 
</dl> 


<!-- Table --> 
<table> 


<caption> One optional caption per table. </caption> 


<colgroup> <col /> <col /> </colgroup> 
<thead> 
<tr> 


<th> One or more header cells in a row... 
<td> One or more data cells ina row... 


</tr> 
</thead> 
<tfoot> 
<tr> 
«th» One or more rows in a row group... 
«td» 
</tr> 
</tfoot> 
<tbody> 
<tr> 


<th> Zero or more row groups in a table... 


<td> 
</tr> 
</tbody> 
</table> 


<!-- Divisions --> 
<div> <div> <div> ... </div> </div> </div> 


</th> 
</td> 


</th> 
</td> 


</th> 
</td> 


CHAPTER 2 = HTML DESIGN PATTERNS 


Structural Block Elements 


Problem 


Solution 


Details 


Related to 
See also 


You want to structure your document so web browsers can render an enhanced 
view of the document; search engines can determine important keywords; 
document processors can use technologies like XSLT to extract content and 
transform the structure; and JavaScript can navigate the structure to modify 
content and make a document interactive. 


You can mark up a document with block elements to identify its structure. 
There is meaning in structure, and HTML markup is most meaningful when its 
structure reflects the hierarchy and relationships of a document's topics. 


Because a parent element contains child elements, they are related structurally. 
This implies their content is related. For example, a child's content is typically 
a subtopic of its parent's topic, and siblings typically have related subtopics. 
Implicit in the hierarchical nature of HTML is the assumption that document 
organization is hierarchical. 


Structural blocks may contain block elements only. They have structural 
meaning, but they have little semantic meaning. In other words, they do not 
tell you what something is; they tell you how it is organized. 


There are four major structural block elements (<ol>, «ul», <dl>, and <table>) 
with nine supporting structural elements (<li>, «dt», «dd», «caption», <thead>, 
<tfoot>, <tbody>, <colgroup>, and <col>). 


<ol> creates an ordered list of one or more list items (<1i>). Items belong to the 
same set and are in order. Order implies sequence or ranking. 


«ul» creates an unordered list of one or more list items («1i»). Items belong to 
the same set without sequence or ranking. 


<dl> creates a definition list of one or more terms («dt») and definitions (<dd>). 
Structurally, a definition list implies all its terms are synonyms and all its 
definitions are alternate definitions of its terms. The HTML specification also 
shows that a definition list can have a broader application, such as listing 
speakers and their dialog. In generic terms, a definition list is an associative 
entity that associates keys with values. 


«table» creates a tabular data structure in rows (<tr>) and cells («th» and <td>). 
It may optionally contain groups of rows: one table header (<thead>), one table 
footer (<tfoot>), and one or more table body groups (<tbody>). It may optionally 
contain one or more column groups (<colgroup>) containing one or more 
columns («col»). Column groups and columns are the only structural blocks 
that are relational instead of hierarchical. In other words, each «col» element 
forms a relationship with cells in a column without actually being their parent. 
A table may optionally contain a «caption». 


«div» is a multi-purpose block element. It can be structural or terminal. I 
mention it here because it normally creates a document division. Document 
divisions are essential for organizing a document into sections, and sections are 
the essential building blocks of documents. That is why I list «div» as the parent 
of all structural elements in the HTML Structure design pattern. 


HTML Structure, Terminal Block Elements, Multi-purpose Block Elements 


Www. Ccssdesignpatterns.com/structural-block-elements 
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Terminal Block Elements 


Terminal Block Elements - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Terminal Block Elements 


Headings, paragraphs, blockquotes, definition terms, addresses. and table captions are terminal block elements. They 
may contain only content. An HTML validator will declare a document invalid if you attempt to put block elements inside 
terminal blocks. 


A blockquote is a terminal block. 


NOTE: 
The content of terminal blocks is always inline. 


An address is a terminal block. 
Table 
caption 
isa 
terminal 
block. 
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HTML 


<hi>Terminal Block Elements</h1> 


<p> 
Headings, paragraphs, blockquotes, definition terms, addresses, 
and table captions are terminal block elements. They may contain only content. 
An HTML validator will declare a document invalid if you attempt 
to put block elements inside terminal blocks. 
</p> 


<blockquote> A blockquote is a terminal block. </blockquote> 


«dl» 

«dt»NOTE: «/dt» 

«dd»The content of terminal blocks is always inline.«/dd» 
«/dl» 


«address» An address is a terminal block. </address> 


«table» 

«caption»Table caption is a terminal block.«/caption» 
<tr><td></td></tr> 

</table> 
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Terminal Block Elements 


Problem You want to transition from document structure to content. 


Solution You can use one of the following terminal blocks to terminate document 
structure so you can insert content: <h1>, «p», «blockquote», «dt», «address», and 
«caption». These elements are the primary containers of content. The multi- 
purpose block elements discussed in the next design pattern may also contain 
content. Paragraphs contain most of a documents content followed by headings, 
blockquotes, list items, and table cells. 


Terminal blocks are terminal nodes in the block structure of a document. They 

cannot contain blocks. They contain text and inline elements. Structurally, they 
are siblings to other terminal and structural blocks, which implies they all have 
subtopics related to their parent block's topic. 


Terminal blocks mainly have semantic meaning. HTML supplies six elements 
you can use to identify the purpose of content: heading, paragraph, blockquote, 
definition term, address, and caption. 


Details <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> create headings from most important 
to least. Headings are relational. They imply the following sibling elements 
(typically paragraphs) have a subtopic that supports the topic of the heading. 
They also imply a relationship to each other. For example, «h2» implies that it is 
a subtopic of the previous «h1» element. Headings placed at lower levels of 
document structure typically have higher heading numbers. You can reinforce 
the structure of a document by making a heading the first element of each 
document division. 


T 
- 
= 
[zz 
i=] 
m 
w 
D 
= 
ms] 
E 
m 
pz] 
= 
[77] 





«p» creates a paragraph. Semantically, a paragraph contains one or more 
sentences. The first sentence defines the topic of the paragraph, and subsequent 
sentences support that topic. The topic of a paragraph is typically a subtopic of 
the previous heading and relates to sibling elements. 


«blockquote» creates a block quote. Semantically, a blockquote contains a quote 
from an external source that relates to the topic of its siblings. 


«dt» creates a definition term. Semantically, a definition term is a term that 

is being defined directly in the document by one or more definitions. The 
Structural Block Elements design pattern includes «dt» because it is a part of 
the «dl» structure. When you use <dl> as an associative entity, «dt» changes its 
semantic meaning to being a key that is associated with one or more values. 
Like a term, a key can be looked up to find its associated items. 


«address» creates a contact record for the document itself. It is not for 
identifying other types of addresses, such as your favorite restaurants. The HTML 
specification allows an address to contain any type of content such as a street 
address, e-mail address, phone number, etc. 


«caption» creates a table caption. Semantically, it labels a table. «caption» is 
referred to in the Structural Block Elements design pattern because it is a part 
of the «table» structure. 


Related to HTML Structure, Structural Block Elements, Multi-purpose Block Elements 


See also www. cssdesignpatterns.com/terminal-block-elements 
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Multi-purpose Block Elements 


© Multi-purpose Block Elements - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Multi-purpose Block Elements 


This content is inside a list but is not inside a list item like it should be. 
1. This content is properly nested in a list item. 
This content outside a list item invalidates and destroys the structure of a list. 


Compare the mixed content in this division with that of the preceding list. 

This content is inside a nested structural division. 

This mixed content is not invalid, but it destroys the block structure and requires a browser to create anonymous 
blocks in which to render it. 





* Checkbox1 


+ [Submit] 














HTML 


<noscript>Show this text when script cannot run.</noscript> 


<div> 
<div> 
«hi»Multi-purpose Block Elements</h1> 
«/div» 
«/div» 


<!-- The following code is invalid HTML and broken structure. --> 
«ol» 
This content is inside a list but is not inside a list item like it should be. 
«li» This content is properly nested in a list item. «/li» 
This content outside a list item invalidates and destroys the structure of a list. 
«/ol» 


<!-- The following code is valid HTML due to a loophole in HTML's DTD, 
but is still broken structure. --» 

«div» 

Compare the mixed content in this division with that of the preceding list. 

«div» This content is inside a nested structural division. «/div» 

This «em»mixed content«/em» is not invalid, but it destroys the block structure 

and requires a browser to create «em»anonymous blocks«/em» in which to render it. 
«/div» 


<!-- The following form contains blocks, which in turn contain controls. --> 
«form id-"formi" method="post" action-"http://www.tipjar.com/cgi-bin/test" > 
«ul» 

«li» «input type="checkbox" id="xbox1" name-"xboxi" value="xbox1" /» 

«label for-"xboxi"»Checkboxi«/label»«/li» 

«li» «input type="submit" id-"submiti" name-"submiti" value-"Submit" /» </li> 
</ul> 
</form> 
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Multi-purpose Block Elements 


Problem 


Solution 


Details 


Related to 
See also 


You want the flexibility of extending the document structure by nesting 
structures within structures or terminating the current structure. 


HTML provides seven elements—«div», «li», «dd», «td», «th», «form», and 
«noscript»—that can extend the structure or terminate it. For this reason, I call 
them multi-purpose block elements, as they are the most versatile elements. You 
can use them to identify document divisions, list items, dictionary definitions, 
table data cells, table header cells, forms, and alternate content to display when 
scripting is unavailable. 


When a multi-purpose block is used structurally, it has structural meaning. 
When it is used terminally, it has semantic meaning. For example, when a list 
item is terminal, it identifies its content as an item in a list. When a list item 
contains a structural block, such as a table or another list, it functions 
structurally as a node in a larger nested structure. 


Multi-purpose blocks may contain blocks or content, but not both. Content is 
defined as text intermingled with inline elements (images, objects, controls, and 
semantic markup). Block elements should not be siblings with inline elements 
and text. This is called mixed content. Content should always be contained 
within a block—not placed in between blocks. Because of limitations in HTMLs 
Document Type Definition language, HTML validators do not always invalidate 
a document containing mixed content, but this does not mean you should 
allow it. When a browser encounters mixed content, it wraps the content in an 
anonymous block. This is because a browser cannot render blocks and content 
at the same time, as blocks flow down the page and content flows across. CSS 
selectors cannot select anonymous blocks, which prevents you from being able 
to style anonymous blocks. 


«div» is a division. It is normally structural, but it can contain content. As shown 
in the example, the block structure created by divisions is invisible unless you 
style each division's margins, border, and/or padding. 


«li» is a list item. Typically, it is a terminal block containing content, but it may 
contain structural blocks such as tables and lists, or terminal blocks such as 
headings and paragraphs. 


«dd» is a definition in a definition list. Typically, it is a terminal block containing 
content, but it may contain structural or terminal blocks. 


«td» and «th» are table cells. «td» is a data cell and «th» is a header cell. 
Typically, cells are terminal blocks containing content, but they may contain 
structural or terminal blocks. 


«form» is a data-entry form. It may contain structural blocks that organize 

form controls (as shown in this example), or it may directly contain inline form 
controls (as shown in the HTML Structure example). It may also contain terminal 
blocks such as headings and paragraphs. 


«noscript» is displayed when a browser does not support scripting. It may 
contain simple inline content, or it may contain a fully structured document. 


HTML Structure, Structural Block Elements, Terminal Block Elements 


Www. Ccssdesignpatterns.com/multi-purpose-block-elements 
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Inline Elements 


© Inline Elements - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Inline Elements 


Italicized 

<em> emphasized 
<cite> citation 

<var> computer variable 
<dfn> definition 


Bold 
<strong> strongly emphasized 


Monospace 

<code> computer code 

<kbd> key press 

<samp> sample computer output 


Underlined 
<a> a 
<acronym> 
<abbr> 


Vertical-aligned 


<sup> superscript? 
<sub> subscripti 


HTML 

«hi»Inline Elements</h1> 

<h2>Italicized</h2> 

<code>&lt; em&gt ; </code> <em>emphasized</em> 
<code>&lt; cite&gt ; </code> <cite>citation</cite> 
<code>&lt; var&gt ; </code> <var>computer variable</var> 


<code>&lt; dfn&gt ; </code> <dfn>definition</dfn> 


<h2>Bold</h2> 


<code>&lt;strong&gt; </code> <strong>strongly emphasized</strong> 


<h2>Monospace</h2> 


<code>&lt ; code&gt ; </code> <code>computer code</code> 
<code>&lt; kbd&gt ; </code> <kbd>key press</kbd> 


«code»&lt;samp&gt; «/code» «samp»sample computer output«/samp» 
«h2»Underlined«/h2» 
«code»&lt;a8gt; </code> «a href="#">a</a> 


«code»&lt;acronym&gt; </code> <acronym title= 


a >acronym</acronym> 


«code»&lt;abbr&gt; </code> <abbr title-"a" >abbreviation</abbr> 
«h2»Vertical-aligned«/h2» 
«code»&lt;sup8gt; </code> superscript<sup>1</sup> 


<code>&lt; sub&gt ; </code> subscript<sub>1</sub> 





<br 
<br 
<br 
<br 


<br 


<br 
<br 
<br 


<br 
<br 
<br 


<br 
<br 


/> 
/> 
/> 
/> 


/> 


/> 
/> 
/> 


/> 
/> 
/> 


/> 
/> 
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Inline Elements 


Problem You want to add explicit meaning to text, and you want to style text to reflect 
this meaning. 


Solution HTML provides inline elements to identify the meaning of text, to control the 
flow of text, and to insert external content into the document, such as images 
and controls. Inline elements are content. 


Intermingling inline elements and text is desirable. Some call this mixed 
content, but I prefer to define mixed content narrowly as blocks, text, and 
inlines being mixed together, which is undesirable. I define content as text 
mixed with inline elements, which is desirable. This clearly separates 
structure from content and emphasizes that inline elements and text 
should always be contained within blocks—not in between blocks. 


Iorganize inline elements into four types: semantic, flow, replaced, and 
controls. Semantic elements identify the meaning of their content. Flow 
elements control the flow, such as inserting a line break. Replaced elements 
are replaced with an object, such as an image. Controls are objects used for 
data entry, such as a text box. 
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HTML assigns each semantic inline element to a default style to emphasize 
that its text has a particular meaning. For example, «code» is rendered in a 
monospace font. You can use CSS to override these default styles. 


Details Three semantic inline elements specify the relative importance of their 
content; they are listed in order of increasing importance as follows: «span», 
«em», and «strong». «span» is generic and has neutral importance. Search 
engines use «em» and «strong» to rank content. 





Ihave organized the remaining semantic inline elements by how much 
content they typically contain, such as a phrase, a word, or a character. 
Phrase inlines include «a», «cite», «code», «kbd», «samp», and «var». Word 
inlines include «acronym», «abbr», and «dfn». Character inlines include 
«sub» and «sup». 


Flow-control elements control the flow of content, such as <br /», which 
inserts a linebreak, and «bdo», which changes the direction of the flow. 


Replaced elements are replaced by external content, such as «img», which is 
replaced by an image or «object», which can be replaced by a video, a Flash 
movie, a sound file, etc. 


Controls are inline elements used for data entry in forms, such as «input», 
«textarea», «select», and «button». 


Default Styles HTML assigns default styles to each semantic inline element. «span» has no 
default style and meaning, so you can use it for any purpose. «strong» is bold 
by default. The following are italicized by default: «em», «dfn», «cite», and 
«var». The following are monospace by default: «code» ,«kbd», and <samp>. 
The following are underlined by default: «a», «acronym», and «abbr». Internet 
Explorer 6 does not support «abbr». 


Related to HTML Structure; all design patterns in Chapters 10 through 12 and 14. 


See also www. cssdesignpatterns.com/inline-elements 
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Class and ID Attributes 


= 
x J Class and ID Attributes - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Class and ID Attributes 





Calendar Event Summary 


Calendar Event Description 

From 01 May 2007 from 8:30am EST to 9:30am EST 

Location: Meeting Location 

Booked by: globally-unique-id.host.com On Jan 1, 2007 at 6:00pm 


See microformats.org for more information about microformats. 





HTML 


«h1»Class and ID Attributes</h1> 
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«div id="hcalendar1" class="vevent"> 
«h3 class="summary">Calendar Event Summary</h3> 





«p class-"description"»Calendar Event Description</p> 


<p>From 

<span class="dtstart" title-"2007-05-01T08:30:00-05:00" 
>01 May 2007 from 8:30am EST</span> to 

<span class="dtend" title-"2007-05-01T09:30:00-05:00" 
>9:30am EST</span></p> 


<p>Location: <span class="location">Meeting Location</span></p> 
<p>Booked by: <span class="uid">globally-unique-id.host.com</span> 
on <span class="dtstamp" title="20070101T231000Z" 
>Jan 1, 2007 at 6:00pm</span></p> 
</div> 


«p»See «a href="http://microformats .org/wiki/hcalendar">microformats .org</a> 
for more information about microformats.</p> 


CSS 


*.vevent p { margin:0 O 5px 0; font-size:0.9em; } 
*.vevent h3 { margin:0 O 5px 0; } 

.vevent *.location { font-style:italic; } 

.vevent *.uid ( font-family:monospace; } 

.vevent *.dtstart, 

.vevent *.dtend, 

.vevent *.dtstamp { color:green; } 


* + y * X 


#hcalendar1 ( margin:5px; border:1px solid black; padding:10px; } 
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Class and ID Attributes 


Problem You want to identify some elements as being in the same class as other elements. 
You want to apply additional semantic and relational meaning to a class of 
elements. You want to style a class of elements in the same way. You want to 
identify some elements uniquely in a document so you can style them uniquely 
and directly access them through JavaScript. 


Solution HTML supplies the class and id attributes for these purposes. You can assign a 
class and an id to any element. 


An ID and class name cannot include a space. It must start with a letter and 
may contain letters, numbers, the underscore ( ), and the dash (-). Since CSS 
selectors are case sensitive when using XHTML, it is a common practice to use 
lowercase class and ID names. 


Class class assigns a user-defined semantic meaning to an element. class is the 
primary mechanism for extending the semantic meaning of HTML elements. 
Elements with the same class are related and can be manipulated as a group. 
You can use CSS selectors to apply a style to a class of elements. You can use a 
document processor, such as XSLT, to manipulate a class of elements. 
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You can assign multiple classes to an element by putting multiple class names in 
an element' class attribute. A space separates each class name. 


Classes should have semantic names, such as copyright, date, price, back-to-top, 
example, figure, listing, illustration, note, result, tip, warning, etc. 


ID An ID should be unique within a document. If it is not, a CSS ID selector will 
match all elements with the same ID—just like the c1ass attribute. 





You can use a unique ID as a CSS selector to style one element. You can use it 
as an anchor that can be targeted by other links. You can use it to access and 
manipulate a specific element from JavaScript or a document processor. 


IDs should have semantic names, such as skip-to-main-content, page, 
preheader, header, title, search, postheader, body, nav, site-map, links, 
main, sectionl, section2, news, about-us, services, products, etc. 


Patterns HTML 
<ELEMENT id-"id" class-"class1 class2 etc" ></ELEMENT> 


CSS 
tid { STYLES } 
*. class { SYTLES } 


Tip Since <div> and <span> elements have no semantic meaning, you can assign 
classes to them without conflicting with any predefined meaning. You can assign 
classes to <div> to create custom document structures with custom semantic 
meaning. You can assign classes to <span> to customize the meaning of text. 
There are currently no standard class names with precise predefined meanings, 
although the MicroFormats movement is making progress toward that goal by 
mapping HTML structure and class names to common standards, such as hCard 
and hCalendar. 


Related to Type, Class, and ID Selectors, Subclass Selector (Chapter 3) 


See also WwWw.Ccssdesignpatterns.com/class-id-attributes 
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HTML Whitespace 


2) HTML Whitespace - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


HTML Whitespace 


start middle end 


Controlling Where Whitespace Collapses 


start| middle lena —inside element 


start Iniaaie| end —outside element 


Embedding Whitespace Inside Tags 
startmiddleend 


Embedding Space Entities 


&zwnj; I &thinsp; | | énbsp; ll éensp; | | &emsp; | | 





[72] 
Z 
c 
Lu 
E 
Es 
=a 
S 
[72] 
[TN] 
a 
| 
= 
= 
x= 


HTML 


<h1>HTML Whitespace</h1> 
<p> start middle &#x0020; &#x0009; <span> </span> «span»«/span» 
&Hx000A; &#x000D; end </p> 





<h2>Controlling Where Whitespace Collapses</h2> 
<p>start<span class="border"> middle </span> end<em>—inside element</em></p> 
<p>start <span class-"border"» middle</span> end<em>—outside element</em></p> 


<h2>Embedding Whitespace Inside Tags</h2> 
<p>start<span 
class 


"spaced" 
»middle«/span 
»end«/p» 


«h2»Embedding Space Entities«/h2» 

<code>&amp;zwnj; ^ «/code»«span class-"border"»8&zwnj;«/span» &nbsp; 
«code»&amp;thinsp; «/code»«span class="border">&thinsp;</span> &nbsp; 
«code»&amp;nbsp; ^ «/code»«span class-"border"»8nbsp;«/span» &nbsp; 
«code»&amp;ensp; ^ «/code»«span class-"border"»8&ensp;«/span» &nbsp; 
«code»&amp;emsp; ^ «/code»«span class="border">&emsp; </span> &nbsp; 


CSS 


em ( padding-left:50px; } 
p ( font-family:monospace; font-size:18px; ] 


*.border ( font-weight:bold; 
border-left:2px solid black; border-right:2px solid black; } 
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HTML Whitespace 


Problem 


Solution 


Space Entities 


Preserved 
Related to 


See also 


You want to use whitespace in markup to make the code more readable 
without the whitespace affecting the rendering of the document. 


A browser collapses repeated whitespace into a single space. This allows you 
to insert extra spaces, tabs, newlines, and returns into the markup to make it 
more readable without it showing up in the rendered document. 


A browser interprets only the following characters as whitespace: space 
(&#x0020;), tab (&#x0009;), newline (&#x000A;), and return (&#x000D;). 


Empty elements and elements containing only whitespace do not interrupt 
a contiguous sequence of whitespace. Notice in the first paragraph of the 
example how a browser renders only one space between the words “start,” 
“middle,” and "end"—even though there are many characters between these 
words including spaces, tabs, newlines, returns, whitespace entities, an 
empty span, and a span containing whitespace. 


The first whitespace character in a series of contiguous whitespace characters 
determines the position and style of the collapsed space. In other words, a 
browser renders collapsed space using the font-family, font-size, 
font-weight, line-height, and letter-spacing assigned to the first 
whitespace character of the series. Larger fonts, wider letter-spacing, and 
taller line-height create wider and taller whitespace. Thus, the location of 
whitespace in an HTML document determines how wide and tall it is. 


The second and third paragraphs of the example show how the location of 
whitespace determines whether it collapses inside an element or outside. If it 
collapses inside, it is styled by the element’s rules. Since whitespace collapses 
to the left, you can collapse whitespace in front of an element by simply 
putting whitespace before it. If you want whitespace to collapse inside an 
element, you need to remove all whitespace before the element and put at 
least one whitespace inside it. If you want whitespace to be inside an element 
and to be placed after its content, simply follow the content with whitespace. 
If you want whitespace to collapse outside the closing tag of an element, you 
need to remove all whitespace following the element's content and insert 
whitespace after the element. 


You can put extra whitespace inside an element's start and end tags without 
putting undesired whitespace in the content. You can insert extra whitespace 
between the start tag’s name and its attributes; surrounding an attribute's 
name, equal sign, and value; and before the start tag’s greater-than sign. You 
can insert extra whitespace between the end tag’s name and its greater-than 
sign. The fourth paragraph of the example is an extreme example that has 
much whitespace inside the tags but none inside the content. 


HTML provides five space entities that have different widths. These are not 
whitespace! The nonbreaking space, &nbsp;, is the width of a normal space 
and works in all major browsers; the widths of the other spaces (&zwnj;, 
&thinsp;, &ensp;, and &emsp;) vary in different browsers. 


The <pre> element preserves all the whitespace that is inside it. 


Spacing, Nowrap, Preserved, Padded Content, Inline Spacer, Linebreak 
(Chapter 11) 


www.cssdesignpatterns.com/html-whitespace 
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CHAPTER 3 


CSS Selectors and Inheritance 


This chapter presents design patterns that select elements for styling. 

Because selector design patterns are simple, I discuss selector design patterns in groups 
rather than one at a time. This makes it easy to compare and contrast related forms of selec- 
tors. Thus, even though this chapter has only six examples, it contains thirteen different 
design patterns. 

Inheritance is included in this chapter because it is simply a built-in way to select descen- 
dant elements. Inheritance is very closely related to the descendant selector. The Visual 
Inheritance pattern is included in this chapter because it is a form of inheritance that is visual 
by nature. 


Chapter Outline 


* Type, Class, and ID Selectors show how to select elements by tag, class, and ID. 


* Position and Group Selectors show how to select elements by how they are nested in 
the document. It also shows how to apply multiple selectors to the same set of rules. 


* Attribute Selectors show how to select elements based on their attributes. 


* Pseudo-element Selectors show how to select the first letter or first line of terminal 
block elements. 


* Pseudo-class Selectors show how to style a hyperlink when it is unvisited, visited, being 
hovered over by the mouse, or has the focus because the user tabbed to it or clicked it 
with the mouse. 


* Subclass Selector shows how to apply multiple styles to the same element using classes 
and subclasses. 


* Inheritance shows how to style elements through rules assigned to their ancestors. 


* Visual Inheritance shows how elements visually inherit their parent's background. 
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Type, Class, and ID Selectors 


Amt 
3) Type, Class, and ID Selectors - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Type, Class, and ID Selectors 


he type selector, p, adds a border to all paragraphs. 


The class selector, *.my-classi, adds padding. 


The class selector, *.my-class2, adds letter-spacing. 


The ID selector, #my-id, adds a background color. 





HTML 


«hi»Type, Class, and ID Selectors</h1> 
«p»The type selector, «code»p«/code», adds a border to all paragraphs.«/p» 


«p class="my-class1"> 
The class selector, <code>*.my-class1</code>, adds padding.</p> 
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<p class="my-class1 my-class2"> 
The class selector, <code>*.my-class2</code>, adds letter-spacing.</p> 





<p class="my-class1 my-class2" id="my-id"> 
The ID selector, <code>#my-id</code>, adds a background color. </p> 


CSS 


p ( border:2px solid black; } 


*.my-classi { padding:10px; } 
*.my-class2 { letter-spacing:0.11em; } 


#my-id { background-color:gold; } 
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Type, Class, and ID Selectors 


Problem 


Solution 


Patterns 


Location 


Tips 


Related to 
See also 


You want to select elements by type, class, and/or ID so you can style them. 
Apply styles to your chosen class or ID as follows: 


- Use the type selector to select all elements of a particular type. The type selector 
is the element's name without the less-than and greater-than signs. 


- Use the class selector to select all elements that you have assigned to a class. The 
class selector is the period followed by the name of a class. The class selector is 
added to the end of a type selector. You can add it onto the end of the universal 
selector, *, to select all elements in the document that have a matching class, such 
as *.my-class1. You can also use the class selector all by itself, such as .my-class1, 
which is a shortcut for *.my-class1. 


- Use the ID selector to select all elements in the document assigned to that ID. 
Each element has one ID, which should be unique in a document. 


HTML 

«ELEMENT» 

«ELEMENT class-"class class class etc"> 
«ELEMENT id="id"> 

«ELEMENT id="id" class-"class"» 


CSS 

type { STYLES } 
*.class ( STYLES } 
tid { STYLES } 


These design patterns apply to all elements. 


You can assign multiple classes to an element, by separating them with a space. 
The class operator selects all elements with matching classes. For example, I 
assigned my-class1 and my-c1ass2 to the second and third paragraphs of the 
example. 


Names of classes and IDs are case sensitive. They must start with a letter and may 
contain letters, numbers, and the hyphen. I recommend always using lowercase 
names for classes and IDs because a browser cannot select a class or an element 
if the case of each letter in the selector does not perfectly match a class name. 

For example, the browser will not select «div class-"SelectMe"» using 
div.selectme. 


If multiple selectors select the same element, each style from each selector is 
applied to the element. Selectors with higher cascade order override the values 
applied by selectors with a lower cascade order. IDs override classes, and classes 
override types. If you apply multiple stylesheets to a document, ID selectors 
override all classes and types in all stylesheets. 


Position and Group Selectors, Pseudo-element Selectors, Pseudo-class Selectors 


www. cssdesignpatterns .com/type-selectors 
www.cssdesignpatterns.com/class-selectors 
www.cssdesignpatterns.com/id-selectors 
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Position and Group Selectors 


© Position and Group Selectors - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Position and Group Selectors 





[| p. my-ciass 








.[div oi ii 








. [div ol li 


. || div ol li p.my-class 











HTML 


«hi»Position and Group Selectors</h1> 


<p class="my-class">p.my-class</p> 
<div id="my-id"> 
<ol> 
«li»div ol li«/li» 
«li»div ol li«/li» 
<li> 
<p class="my-class">div ol li p.my-class </p> 
</li> 
«/ol» 
«/div» 
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CSS 


/* Group Selectors */ 

p,ol,li { border:1px solid black; padding-left:10px; font-family:monospace; 
margin:10px; margin-left:Opx; } 

ol ( margin-left:0px; padding-left:40px; margin-top:20px; } 


/* Position Selectors */ 
div *.my-class { font-size:1.2em; font-weight:bold; } /* Descendant Selector */ 


#my-id p { background-color:gold; } /* Descendant Selector */ 
iimy-id > * { border:3px solid black; } /* Child Selector */ 
li:first-child { font-weight:bold; color:red; } /* First-child Selector */ 


li + li { font-style:italic; color:blue; } /* Sibling Selector */ 


CHAPTER 3. CSS SELECTORS AND INHERITANCE 


Position and Group Selectors 


Problem 


Solution 


Patterns 


Location 


Limitations 


Example 


Related to 
See also 


You want to combine selectors to narrow a selection based on element position. 
In other words, you want to select elements based on whether they are 
descendants, children, or siblings of other elements. You also want to apply 
different selectors to the same set of rules. 


Combine selectors as follows: 


- To apply different selectors to the same group of rules, chain together multiple 
selectors using a comma. This is the group selector. Each selector in the chain is 
independently assigned to the same set of styles. 


- To select descendant elements, chain together multiple selectors using 
whitespace. Whitespace is the descendant selector. Each descendant selector 
narrows the selection to descendants of the previous selector. A descendant can 
bea child, a grandchild, a great-grandchild, and so forth. 


- To select child elements, chain together multiple selectors using the greater- 
than sign. This is the child selector. Each child selector narrows the selection to 
elements that are children of the previous selector. 


- To select the first child element, append : first-child to any selector. This is 
the first-child selector. This limits the selector only to elements that are the first 
child of their parents. 


- To select sibling elements, chain together multiple selectors using the plus sign. 
This is the sibling selector. Each sibling selector narrows the selection to 
elements that are siblings to the elements chosen by the previous selector. 


CSS 

selector, selector, etc {STYLES} 
or selector selector etc {STYLES} 
or selector > selector > etc {STYLES} 
or selector + selector + etc {STYLES} 
or selector:first-child {STYLES} 


These design patterns apply to all elements. 


Only the group and descendant selectors work in Internet Explorer 6. All these 
selectors work in Internet Explorer 7 and the other major browsers. 


The group selector p,o1,1i applies the same set of styles to all paragraphs, 
ordered lists, and list items. The selector div *.my-class selects all elements 
assigned to my-class that descend from a division. Only the paragraph in the 
third list item matches this selector. The selector #my-id p selects all paragraphs 
descending from <div id="my-id">. Only the paragraph in the third list item 
matches this selector. The selector #my-id > p selects all child elements 
descending from <div id="my-id">. Only the ordered list matches this selector. 
The selector li:first-child selects the first list item in each list. The selector 

li + liselects all list items that are siblings to list items. This selects all but the 
first list item. 


Inheritance 


www. cssdesignpatterns.com/position-selectors 
www.cssdesignpatterns.com/group-selectors 
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Attribute Selectors 


n 
- Attribute Selectors - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Attribute Selectors 


This is a paragraph without the title attribute. 





p[title] selects all paragraphs containing a title attribute. 





p[title~="paragraph"] selects all paragraphs with a title attribute 
containing the word, paragraph. 








p[title="#4 paragraph"] Selects all paragraphs with a title 
attribute containing the exact text, #4 paragraph. Matches are 
case sensitive and must match letter-for-letter including 
whitespace. 














HTML 


<hi>Attribute Selectors</h1> 
<p>This is a paragraph without the <code>title</code> attribute.</p> 


<p title="Second"> 
<code>p[title]</code> selects all paragraphs containing a title attribute.</p> 


<p title="Third paragraph"> 
<code>p[title~="paragraph" ]</code> selects all paragraphs with a 
title attribute containing the word, <code>paragraph</code>.</p> 


«p title="#4 paragraph"> 

<code>p[title="#4 paragraph" ]</code> selects all paragraphs with a 

title attribute containing the exact text, <code>#4 paragraph</code>. Matches 
are case sensitive and must match letter-for-letter including whitespace. </p> 


css 
code { white-space:pre; } 
p[title] { padding:5px 10px; border:1px solid gray; } 


p[title~="paragraph"] { background-color:gold; } 
p[title="#4 paragraph"] { font-weight:bold; } 


CHAPTER 3. CSS SELECTORS AND INHERITANCE 


Attribute Selectors 


Problem 


Solution 


Patterns 


Location 


Limitations 


Related to 
See also 


You want to select elements depending on whether they contain a specific 
attribute, contain a specific word within a specific attribute, or contain a specific 
value within a specific attribute. 


CSS provides three attribute selectors for this purpose. CSS does not name them 
individually. I call them the Attribute Existence Selector, the Attribute Word 
Selector, and the Attribute Value Selector. You can append these attribute 
selectors to the end of any selector. 


You can use the Attribute Existence Selector to select elements that contain a 
specific attribute. The Attribute Existence Selector is the name of the attribute 
enclosed in straight brackets. For example, p[title] selects all paragraphs 
containing the title attribute. If an element contains the attribute and the 
attribute is assigned to a value, the Attribute Existence Selector matches it. 
The attribute may contain any value, but some browsers will not match an 


"n" 


empty attribute, such as «p title="">. 


You can use the Attribute Word Selector to select elements that contain a 
specific word within a specific attribute. The Attribute Word Selector is the 
opening straight bracket, the name of the attribute, a tilde, an equal sign, 

the word in double quotes, and the closing straight bracket. For example, 
p[title^-"paragraph"] selects all paragraphs containing the word paragraph 
inside their title attribute, such as «p title-"Third paragraph">. The attribute 
may contain other words in addition to the matching word. A word is separated 
from other words using spaces. The match is case sensitive. 


You can use the Attribute Value Selector to select elements that contain a 
specific value within a specific attribute. The Attribute Value Selector is 

the opening straight bracket, the name of the attribute, an equal sign, the 

value in double quotes, and the closing straight bracket. For example, 
p[title="#4 ^ paragraph"] selects all paragraphs containing the exact value 

#4 paragraph inside their title attribute, such as p[title="#4 ^ paragraph" ]. 
The match is case sensitive and must match the entire attribute value including 
whitespace. 


CSS 

SELECTOR[title] { STYLES } 

or 

SELECTOR[title~="WORD"] { STYLES } 
or 


SELECTOR[title="EXACT MATCH OF ENTIRE VALUE"] { STYLES } 
These design patterns apply to all elements. 





Attribute selectors do not work in Internet Explorer 6. They work in Internet 
Explorer 7 and other major browsers. CSS defines another selector that I call 
the Attribute Language Selector (e.g., [lang=en]), but it is not well supported. 


Inheritance 


www. cssdesignpatterns.com/attribute-selectors 


65 


2 
n 
n 
n 
m 
E 
2 
S 
E! 
[27] 
D> 
= 
i=] 
= 
I 
m 
E: 
zi 
D> 
Z 
Q 
m 





wi 
[2] 
E: 
E 
oc 
[TT] 
I 
= 
= 
z 
= 
e 
S 
= 
=) 
wi 
-l 
L 
n 
o 
o 
© 





66 CHAPTER 3 CSS SELECTORS AND INHERITANCE 


Pseudo-element Selectors 


©) Pseudo-element Selectors - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Pseudo-element Selectors 


T EEPE selects the first letter, and first-line selects 


the first line of a terminal block element, like this paragraph. 
Pseudo-element selectors do not work on inline elements. 


Pseudo-element selectors do not work on structural block elements. 





HTML 


<h1>Pseudo-element Selectors</h1> 


<p><code>first-letter</code> selects the first letter, and 
<code>first-line</code> selects the first line of a terminal block element, 
like this paragraph.</p> 


<div><span>Pseudo-element selectors do not work on inline elements.</span></div> 


<dl> 
<dt>Pseudo-element selectors do not work on structural block elements.</dt> 
</dl> 


CSS 


p:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; } 
p:first-letter { font-size:48px; } 


span: first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; } 
span: first-letter { font-size:48px; } 


dl:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; } 
dl:first-letter { font-size:48px; } 
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Pseudo-element Selectors 


Problem 


Solution 


Patterns 


Location 


Notes 


Limitations 


Example 


Related to 
See also 


You want to select the first letter or first line of an element. 


HTML 
No markup is required. 


CSS 
Combine the first-letter and first-line pseudo selector with classes, IDs, 
and types of your choosing. 


CSS 

ELEMENT:first-letter { STYLES } 
or *.CLASS:first-letter { STYLES } 
or #ID:first-letter ( STYLES } 
or ELEMENT: first-line { STYLES } 
or *.CLASS:first-line { STYLES } 
or #1D:first-line { STYLES } 


first-letter and first-line work only on terminal block elements. They do not 
work on inline elements or structural block elements. 


first-letter and first-line are called pseudo-element selectors because 
they select a subset of content in an element rather than all the content in an 
element. In other words, they create a pseudo element. 


Internet Explorer 6 ignores a pseudo-element selector unless it is the last selector 
in a chain of selectors. Version 7 fixes this problem. 


The first-letter selector works best with font and text properties. Browsers 
cannot position pseudo-elements and have trouble aligning them. In other 
words, position, left, right, top, and bottom have no effect on pseudo elements. 
Also, vertical-align works inconsistently on pseudo elements. 


Browsers have exceptional cases where they may not select the first letter or may 
select more than the first letter. For example, no major browser selects the first 
letter when an image or object precedes it. For example, Opera 9 does not select 
the first letter of table cells, and Internet Explorer 6 selects the list marker along 
with the first letter of a list item. Finally, pseudo-element selectors bring out bugs 
in browsers, so be sure to test your use of them in all major browsers. 


In the example, I set three different pseudo-element selectors to the same set of 
styles. I did not use a grouping selector because Internet Explorer 6 does not 
recognize pseudo selectors when they are part of a grouping selector. 


Class Selector, Pseudo-class Selectors 
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Pseudo-class Selectors 


À Pseudo-class Selectors - Microsoft Internet Explorer 
File Edit View Favorites Tools Help 





Pseudo-class Selectors 





a:link -- unvisited link 








a:visited -- visited link 


a:hover -- mouse hovering m 
a:active -- visiting a link 





HTML 


<h1>Pseudo-class Selectors</h1> 


<p> 

<a href="http://www.cssdesignpatterns.com">a:link -- unvisited link</a> 

«a href="http://www.htmldesignpatterns.com">a:visited -- visited link</a> 
<a href="http://www.cssdesignpatterns.com">a:hover -- mouse hovering</a> 
«a href-"http://www.cssdesignpatterns.com"»a:active -- visiting a link«/a» 
</p> 
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CSS 


a ( padding:3px 10px; margin:20px 10px; text-decoration:none; 
display:block; width:260px; 
border-left:1px solid dimgray; border-right:2px solid black; 
border-top:1px solid dimgray;  border-bottom:2px solid black; } 


:link ( color:black; background-color:white; } 

:visited { color:gray; background-color:white; } 

:hover { color:white; background-color:green; } 

:active, a:focus { color:green; background-color:gold; } 


oo vyv 
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Pseudo-class Selectors 


Problem 


Solution 


Patterns 


Location 


Limitations 


Tips 


Variations 
Related to 
See also 


You want to style a hyperlink depending on whether it is unvisited, visited, being 
hovered over by the mouse, or in the process of being visited. 


HTML 
Insert hyperlinks using <a>. 


CSS 
Select hyperlinks based on their state: 


- Use a: link to select a hyperlink when it has not been visited. 

- Use a:visited to select a hyperlink when it has been visited. 

- Use a: hover to select a hyperlink when the mouse hovers over it. 

- Use a: focus to select a hyperlink when it receives focus in other browsers. 
- Use a:active to select a hyperlink when it receives focus in IE. 


HTML 
<a> 


CSS 

a:link ( STYLES } 

a:visited { STYLES } 
a:hover { STYLES } 

a:active, a:focus { STYLES } 


Pseudo-class selectors work on hyperlinks (<a>). 


Internet Explorer 6 supports the hover pseudo class only on hyperlinks. IE7 and 
all other major browsers support hover on all elements. 


CSS 2.1 defines two additional pseudo classes: first-child and lang(). 
first-child selects an element when it is the first child of another element. 
lang() selects an element when it has been assigned to the specified human 
language. These pseudo classes are not supported in Internet Explorer 6. Internet 
Explorer 7 supports first-child, but not lang. I do not recommend using them 
until the majority of users use a browser that supports them. 


The underline is the standard visual indicator of a hyperlink. If you remove an 
underline from a hyperlink, you should style it to look like it should be clicked. 
In the example, I styled the hyperlinks to look like simple buttons. 


Pseudo-class selectors should be placed in your stylesheet in the order listed 
previously (link, visited, hover, active, and focus). You can remember the order 
using the mnemonic Las Vegas Hells Angels Fight. 


A browser displays the active state when a user tabs to a hyperlink. It is also 
displayed for less than a second when a user clicks a hyperlink. You can apply a 
contrasting style to the active pseudo class to make the hyperlink “flash” when 
the user clicks it. This gives the user immediate feedback that the browser 
recognized the click. 


You can use any combination of CSS styles to style hyperlinks. 
Class Selector, Pseudo-element Selectors 


www. cssdesignpatterns .com/pseudo-class-selectors 
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CHAPTER 3 ™ CSS SELECTORS AND INHERITANCE 


Subclass Selector 


©) Subclass Selector - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Subclass Selector 


Square | 





Rounded 


o 





HTML 


<h1>Subclass Selector</h1> 


<div> 

<p class="button square"»Square«/p» 
<p class="button rounded">Rounded</p> 
<p class="button go">Go</p> 

</div> 


CSS 


* 


.button { width:175px; padding:3px 10px; margin:20px 0; text-align:center; 
font-weight:bold; margin-left:50px; line-height:normal; } 


* 


.button.square { color:darkblue; background-color:gold; 
border-left:1px solid dimgray; border-right:2px solid black; 
border-top:1px solid dimgray; border-bottom:2px solid black; } 


* 


-button.rounded { color:darkblue; background-color:white; 
line-height:45px; margin-top:30px; 
background:url("oval.gif") no-repeat center center; } 


* 


-button.go ( background-color:white; line-height: 26px; 
text-indent:-9999px; font-size:10px; 
background: url("go.jpg") no-repeat center center; } 
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Subclass Selector 


Problem 


Solution 


Pattern 


Location 


Advantages 


Example 


Related to 
See also 


You want a class of elements to be styled with common rules. You also want these 
elements to be divided into subclasses and styled with specialized rules that may 
override the base rules. 


HTML 

You can assign classes to elements in your HTML code using the class attribute. 
A class attribute can contain an unlimited number of space-delimited classes. 
The order of the classes in the attribute is not important. For readability, I 
recommend listing the base class first followed by its subclasses. The classes 
assigned to an element do not have to be related, but the code is more logical if 
you organize them into classes and subclasses. 


CSS 

To select all elements assigned to the base class, use the universal selector 
followed by the dot operator, followed by the name of the class. 

To select all elements assigned to a base class, use the universal selector followed 
by the dot operator, followed by the name of the base class, followed by the dot 
operator, followed by the name of the subclass. I call this chaining together 
classes. There is no limit to the number of chained classes. The order of the 
classes in the selector is not important. For readability, I recommend listing the 
base class first followed by its subclasses. The classes you chain together do not 
have to be related, but the code is more logical if they are organized into base 
classes and subclasses. 


HTML 
<ELEMENT class="class subclass etc"> 


css 
*.class ( SHARED BASE STYLES } 
*.class.subclass.etc { SUBCLASS STYLES } 


You can apply this design pattern to any element. 


You can use this design pattern to build a hierarchy of rules based on classes and 
subclasses. As in object-oriented programming, subclassed elements “inherit” 
the rules from their base class and their subclass. CSS cascading order ensures 
rules from the subclass override the rules in the base class. 


In the example, all paragraphs are assigned to the button class. Each one is also 
assigned to the square, rounded, and go subclasses. All paragraphs assigned to 
the button class share the same base rules assigned by *. button, such as 
width:175px. Each subclassed paragraph is assigned to specialized rules through 
*, button. square, *.button. rounded, or *.button.go. For example, each subclass 
assigns a different background to its type of button. Some specialized rules, like 
margin and line-height, override base rules. 


Class Selector 


www.cssdesignpatterns.com/subclass-selector 
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Inheritance 


© Inheritance - Mozilla Firefox 


File Edit 


View Go Bookmarks Tools Help 


Inheritance 


- This span inherits font from its ancestor, <body>. 


- It inherits line-height from its ancestor, <div>. 


- It inherits letter-spacing from its ancestor, <p>. 


- It inherits italics from its ancestor, <em>, but it is also directly 


assigned to font-style:normal which overrides its inherited italics. 


HTML 


<body> 
<h1>In 


<div> 
<p> 
<em> 
<sp 


«/s 
«/em 
</p> 
</div> 
</body> 


CSS 


body { 
div (1 
p { let 
em { fo 
span { 





heritance</h1> 


an> 

This span inherits font from its ancestor, <code>&lt;body&gt;</code>. <br /> 
It inherits line-height from its ancestor, <code>&lt;div&gt;</code>. <br /» 
It inherits letter-spacing from its ancestor, <code>&lt;p&gt;</code>. <br /» 
It inherits italics from its ancestor, <code>&lt;em&gt;</code>, 

but it is also directly assigned to <code>font-style:normal </code> which 
overrides its inherited italics. 

pan> 

> 


font-family: verdana,arial,sans-serif; font-size:18px; } 
ine-height:2em; } 

ter-spacing:0.8px; } 

nt-style:italic; } 

font-style:normal; } 


Inheritance 


Problem 


Solution 


Pattern 


Inherited properties 


Noninherited 


Limitations 


Tip 


Related to 
See also 


CHAPTER 3 ™ CSS SELECTORS AND INHERITANCE 


You want to style an element and have all its descendants be styled the 
same. 


CSS is designed so that many properties are inherited by default. This 
means you can assign one of these inherited properties to any element, 
and any descendants will inherit the property. Most inline properties 
are inherited by default. A list of all properties and how they are 
inherited follows. 


Inheritance is a type of selector that is built into the CSS language. 
You do not have to do anything to use inheritance. When a browser 
encounters an inherited property, it automatically selects descendant 
inline elements and applies its rule to them. When you assign a 
property directly to an element, it overrides any inherited value. 


The following properties are inherited by all elements: 
visibility and cursor. 


The following properties are inherited by inline elements: 
letter-spacing, word-spacing, white-space, line-height, color, font, 
font-family, font-size, font-style, font-variant, font-weight, 
text-decoration, text-transform, direction. 


The following properties are inherited by terminal block elements: 
text-indent and text-align. 


The following properties are inherited by list elements: 
list-style, list-style-type, list-style-position, and 
list-style-image. 


The following property is inherited by table elements: 
border-collapse. 


The following properties are not inherited: 

display, margin, border, padding, background, height, min-height, 
max-height, width, min-width, max-width, overflow, position, left, 
right, top, bottom, z- index, float, clear, table-layout, vertical-align, 
page-break-after, page-break-before, and unicode-bidi. 


CSS provides a constant value named inherited that you can assign to 
any property. When you assign inherited to a property, that property 
inherits its value from its parent element. This allows you to force 
properties to inherit. Internet Explorer versions 7 and earlier do not 
implement inherit. The following tip shows how you can simulate 
inheritance for any property. 


You can simulate inheritance for properties that cannot inherit. You 
first select a starting element using any selector. You then follow the 
selector by the descendant operator and the universal selector. The 
pattern is SELECTOR *. For example, you can put a border around all 
elements descended from <html> by using html * { border:1px solid 
black; j.Ioften use this code to see the nesting of all elements in a 
document. 


Position and Group Selectors 


www.cssdesignpatterns.com/inheritance 
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Visual Inheritance 


© visual Inheritance - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Visual Inheritance 





- This span is nested inside a label, a paragraph, and a division. 

- The division is assigned a background color, padding and a border. 
- Since the span, label, and paragraph default to a transparent 
background color and have no border, they "visually inherit" the 
background, padding, and border of the division. 

- Once you assign a background to an element, it no longer visually 
inherits the background of its parent—like this EE element. 








HTML 
«hi»Visual Inheritance«/hi» 
«div» 
«p» 
«label» 
«span» 

- This span is nested inside a label, a paragraph, and a division. «br /» 

- The division is assigned a background color, padding and a border. «br /» 

- Since the span, label, and paragraph default to a transparent background 
color and have no border, they "visually inherit" the 
background, padding, and border of the division. «br /» 

- Once you assign a background to an element, it no longer visually inherits 
the background of its parent-like this <code>&lt;code&gt;</code> element. 
«code»&lt;code&gt;«/code» element. 

</span> 
</label> 
</p> 
</div> 
CSS 


div ( background-color:gold; color:black; padding:10px 20px; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:ipx solid gray; border-bottom:2px solid black; } 


p ( background-color:transparent; background-image:none; } 
label ( background-color:transparent; background-image:none; } 


span ( background-color:transparent; background-image:none; } 


code ( background-color:firebrick; color:white; } 
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Visual Inheritance 


Problem You want the background of a child element to be the same as its parent. 


Solution CSS automatically layers elements transparently. Child elements are layered on 
top of parent elements. If margins or positioning cause sibling elements to 
overlap, following siblings overlap previous siblings. For floated and positioned 
elements, you can set the layering explicitly using the z-index property. This is a 
design pattern built into CSS. You do not need to do anything to take advantage 
of it. 


The background-color property defaults to transparent, and the background- image 
property defaults to none. This allows the background of an element's ancestors to 
show through. In other words, a browser renders child elements in transparent 
layers above parent elements unless you set a child's background-color to a color, 
or you set its background-image to an image. 


Since child elements are nested within parent elements, each child element 
visually inherits the borders and padding of its parent. In other words, a parent's 
borders and padding surround its children. If a child has a transparent 
background and no borders, it appears as if the parent's borders and padding are 
the child's borders and padding. Without borders around a child, you cannot tell 
where the parent's padding area ends and the child's padding area begins. Once 
you add borders to a child element, it no longer visually inherits the borders and 
padding of its parent because you can see precisely where the parent ends and the 
child begins. 


Pattern You do not need to do anything to use visual inheritance because 
background-color defaults to transparent and background-image defaults to none. 
When you want a child element not to visually inherit the background of its 
parent, you can set the element to its own background color or image as follows: 
SELECTOR ( background-color:COLOR; 
background-image:url("FILE.EXT"); ) 


Location This design pattern applies to all elements. 


2 
e 
[7 
[77] 
m 
E 
e 
3 
=] 
[77 
> 
2 
[2] 
2 
zr 
m 
= 
E 
z 
[v] 
rm 


Example In the example, the division has a gold background, and all its descendant 
elements visually inherit the background—except for the code element, 
which is assigned to the firebrick background color. Notice that I assigned 
background-color:transparent and background-image:none to the paragraph, 
label, and span. I did this to show these rules in action. You do not typically need 
to assign these rules in your code because background-color:transparent and 
background-image:none are the default for all elements. On the other hand, you 
can use these rules whenever you want to reset an element to a transparent 
background after another rule assigned it to a background color or image. 





Related to Inheritance 


See also Www. Ccssdesignpatterns.com/visual-inheritance 


CHAPTER 4 


Box Models 


The fundamental design pattern in CSS is the Box Model. The Box Model defines how ele- 
ments are rendered as boxes. There are six main types of boxes: inline, inline-block, block, 
table, absolute, and floated. A browser renders each element as one of these boxes. Some ele- 
ments are rendered in a variation of one of these boxes, such as a list item or table cell. For 
example, list-item is a block box with an inline marker automatically created by the browser, 
and table-cell is a block box that does not support margins. 

You can use the display property to render an element as a different type of box. You can 
use position:absolute or position: fixed to render any element as an absolute box. You can 
use the float: left or float:right rules to render any element as a floated box. 

This is the first of three chapters on the Box Model. This chapter explains the six main 
types of boxes. Chapter 5 introduces extents, which are controlled by width and height. 
Extents control whether a box is shrinkwrapped to its content, sized, or stretched to the sides 
of its container. Chapter 6 introduces the Box Model properties: margin, border, padding, 
background, overflow, visibility, page-break-before, and page-break-after. Background, 
visibility, and page breaks work the same in all boxes. Borders, padding, and overflow work 
the same in all boxes except for inline. Width, height, and margins work differently in each 
type of box. 


Chapter Outline 


Display shows how to render an element as an inline box, a block box, an inline-block 
box, a list-item box, a table box, or not at all. 


Box Model introduces the general box model underlying all types of boxes. 
Inline Box shows how inline boxes work. 

Inline-block Box shows how inline-block and replaced inline boxes work. 
Block Box shows how block boxes work. 

Table Box shows how table boxes work. 

Absolute Box shows how absolute and fixed boxes work. 


Floated Box shows how floated boxes work. 
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CHAPTER 4 BOX MODELS 


Display 


Y Display - Opera 


Eile Edit View Bookmarks Widgets Tools Help 


Display 


sientay:imtine M E s PERI, os | 


em display:block 


em 


a|dfn display:list-item 
a a O 


display:none 








HTML 


<hi>Display</h1> 


<code>display: inline</code> 

<p>p</p> <p>p</p> <p>p</p> 

<ol><li>li</li><li>li</li><li>li</li></ol> 
<table><tr><td>td</td><td>td</td></tr><tr><td>td</td><td>td</td></tr></table> 


<strong>strong «br /»«code»display:inline-block«/code»«/strong» <br /»«br /» 
«em»em <code>display:block</code></em> «em»em«/em» «br /» 
«div class-"ul"»«dfn»dfn «code»display:list-item«/code»«/dfn»«dfn»dfn«/dfn»«/div» 


«br /»«img src-"star.gif" alt-"star" /» «code»display:none«/code» 


CSS 


p,ol,li,table ( display:inline; } 

strong ( display:inline-block; width:250px; ] 

em ( display:block; } 

dfn ( display:list-item; list-style-type:square; j 
img ( display:none; ] 


*.ul ( padding-left:15px; } 


Display 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 


Example 


Related to 


See also 


CHAPTER 4 ™ BOX MODELS 


You want to fundamentally change how the browser renders an element. For 
example, you want a block element rendered inline, as a list item, or as a table; 
or you do not want it to be rendered at all—as if it never existed. 


You can use the display property to change how an element is rendered. You 
can use display:none to prevent an element from being rendered. You can use 
display:inline to render an element inline. You can use display:block or 
display:list-itemto render an element as a block or list item. You can use 
display:inline-block to render an inline element as a block nested in a line. 


SELECTOR ( display:inline; ] 
SELECTOR { display:inline-block; } 
SELECTOR { display:block; } 
SELECTOR { display:list-item; } 
SELECTOR { display:none; } 


This design pattern applies to all elements. 


Firefox 2 does not support display: inline-block. I have included it in the design 
pattern because future versions of Firefox are likely to support it. 


There are additional display types, but they are not well supported. No major 
browser supports compact. Internet Explorer 7 and Firefox 2 do not support 
run-in and inline-table. Internet Explorer 7 does not support table, 
table-cell, table-row, table-header-group, table-footer-group, 
table-row-troup, table-column-group, table-column, and table-caption. 


When you display an element as a list item, its parent needs to be rendered as a 
block and needs to provide left padding or left margin for the marker. This is 
required because a list is a two-part structure: an outer block, such as «ol», «ul», 
or <dl>, and an inner block, such as «li», «dd», or <dt>. You can assign a marker 
to it using list-style-type. 


A browser renders a list-item as a block with an inline marker. When you want 
a list-item to look like a block, you can simply turn off the marker using 
list-style-type:none—you do not need to change the display type because 

a list is already a block. You may also want to remove its parent's padding and 
margin. 


The example uses display:inline to render the blocks «p» and «1i» as inline 
boxes. It uses display:inline-block to render the inline «strong» as an inline 
block. It uses display:block to display the inline «em» as a block. It uses 
display:list-itemto render the inline «dfn» elements as list items. It assigns 
a marker to them using list-style-type. It also assigns left padding to their 
parent to make room for the marker. Lastly, it uses display:none to hide an 
image. 


Visibility (Chapter 6); Blocked (Chapter 11); Inlined, Run-in (Chapter 13); 
Tabled, Rowed, and Celled (Chapter 15) 


Www. Ccssdesignpatterns.com/display 
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CHAPTER 4 BOX MODELS 


Box Model 


© Block Box Model - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Box Model 


Outer Box 


Margin 


Padding 


Inner Box 


: 
Top 
— Left Right — 


Bottom 
l 


HTML 


<h1>Box Model</h1> 
<div class="box"></div> 


<!-- The HTML code that creates the labels and extra borders is not shown. --> 


CSS 


*.box ( display:static; 
overflow:visible; 
visibility:visible; 
width:160px; 
height:150px; 
padding: 30px; 
border-top: 30px solid gray; border-bottom:30px solid black; 
border-left:30px solid gray; border-right: 30px solid black; 
margin-left:230px; margin-top:80px; 
background-color:gold; } 


/* Nonessential rules are not shown. */ 


CHAPTER 4 ™ BOX MODELS 81 


Box Model 


Problem 


Solution 


Pattern 


Location 


Example 


Notes 


Related to 
See also 


You want to style the box of an element. 


The Box Model design pattern is built into CSS. This model defines the 
relationship between the following properties: display, width, height, padding, 
border, margin, background, overflow, and visibility. 


width normally sets the width of an element's inner box. 
height normally sets the height of an element's inner box. 


padding sets the size of the padding surrounding the inner box. The padding is 
transparent to the element's background. 


border sets the size, pattern, and color of the border surrounding the padding. 


margin sets the size of the margin surrounding the border. The margin is 
transparent to the background of the element's parent. The outside of the 
margin is the element's outer box. 


background assigns the padding area inside the box to a background color and/or 
image. 


overflow determines what happens when an element's content is larger than its 
inner box. The default is to show the overflowing content. 


visibility can make the element visible or hidden. 


SELECTOR { display:CONSTANT; 
overflow: VALUE; 
visibility: VALUE; 
width:+VALUE; 
height :+VALUE ; 
padding: +VALUE; 
border:+WIDTH STYLE COLOR; 
margin:+VALUE; 
background: VALUES; } 


This design pattern applies to all elements. 


The example contains additional HTML markup and CSS rules that are not 
shown. This extra code renders a label over each part of the box and draws the 
outer box and inner box borders. 







CSS defines six main types of boxes: inline, inline-block, block, table, absolute, 
and floated. The type of box is determined by the combination of the following 
properties: display, position, and float. Box Model properties work differently 
and produce different layouts depending on the type of box. Certain types of 
boxes have additional functionality provided by additional properties, such as 
line-height, border-collapse, and table-layout. 


EXE X04 


All Box Model design patterns 


www. cssdesignpatterns .com/box-model 
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CHAPTER 4 ™ BOX MODELS 


Inline Box 


© Inline Box - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Inline Box 





BEFORE — Left 1 Top Bottom | 














HTML 


<h1>Inline Box«/hi» 


«div class-"container"» 
«span class="default">BEFORE</span> 


«span class="box">&larr; Left &nbsp; &uarr; Top &nbsp; 
Bottom &darr; &nbsp; Right &rarr; </span> 


«span class-"default"»AFTER«/span» 
</div> 


CSS 


*.box ( display:inline; visibility:visible; 
line-height:100px; 
margin:O 100px; 
padding:20px 120px; 


border-top: 5px solid gray; 
border-bottom:5px solid black; 
border-left: 5px solid gray; 
border-right: 5px solid black; 
background-color:gold; } 


/* Nonessential rules are not shown. */ 
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Inline Box 


Aliases 
Problem 


Solution 


Pattern 


Location 


Related to 


See also 


Inline, inline element, and static inline box are synonyms with inline box. 
You want to style the box of an inline element. 


Inline boxes are rendered in the inline flow. They flow horizontally from left to 
right (or right to left in some languages) and are wrapped to new lines when they 
exceed the width of their closest terminal block ancestor. This is called the inline 
formatting context. CSS provides the following properties for styling inline 
boxes: 


width, height, and overflow do not work on inline elements, because they always 
shrinkwrap to fit the width and height of their content. 


margin and line-height are applied to inline elements in unique ways. 
Horizontal margins change the position of inline elements in the flow. A positive 
value in margin-left moves the element away from the previous element, and a 
negative value moves it closer. A positive value in margin-right moves the next 
element further away, and a negative value moves it closer. margin-top and 
margin-bottom are ignored by inline elements. Instead, inline elements use 
line-height to size the height of a line. 


border is applied to inline elements in unique ways. Horizontal borders change 
the position of inline elements in the flow. The left border moves the element 

to the left, and the right border moves the next element to the right. The top 
and bottom borders are rendered above and below the padding area without 
expanding the height of the line or changing the vertical position of the inline 
element. Because borders do not affect the height of the line, borders can overlap 
neighboring lines unless you increase line-height. When a bordered element is 
wrapped across lines, the browser does not render the right border at the end of 
the line, and it does not render the left border at the beginning of the wrapped 
line. The left and right borders occur only at the beginning and end of the 
element. 


padding is applied to inline elements in exactly the same way as borders. 


INLINE SELECTOR ( display:inline; visibility:VALUE; 
line-height :+VALUE; 
margin:+VALUE; 
padding: +VALUE ; 
border:+WIDTH STYLE COLOR; 
background: VALUES; } 


This design pattern applies to inline elements and any element displayed inline. 


Display, Box Model; Shrinkwrapped (Chapter 5); Margin, Border, Padding, 
Background, Visibility (Chapter 6) 


www. cssdesignpatterns.com/inline-box 
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Inline-block Box 


Æ Inline-block Box - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 





Inline-block Box 





BEFORE 


Inline element displayed as 
an inline block. 








BEFORE 








HTML 


<h1>Inline-block Box</h1> 


<div class="container"> 
«span class="default">BEFORE</span> 
<img class="replaced-box" src="star.gif" alt="star" /> 
«span class="default">AFTER</span> 


«span class="default">BEFORE</span> 
<span class="inline-box">Inline element displayed as an inline block.</span> 
«span class="default">AFTER</span> 

</div> 


CSS 
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*.replaced-box { display: inline-block; 
overflow:visible; visibility: visible; 
width:51px; height:52px; 
margin:10px 100px; padding:10px 120px; } 





*.inline-box { display:inline-block; 
overflow:visible; visibility:visible; 
width:275px; height:52px; 
margin:10px 100px; padding:10px 10px; } 


/* Nonessential rules are not shown. 
See Inline Box for border and background properties. */ 
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Inline-block Box 


Problem 


Solution 


Pattern 


Location 


Limitations 


Example 


Related to 


See also 


You want to style the box of an inline-block element. Inline-block elements 
include replaced elements and inline elements displayed as inline blocks. For 
example, an image is a replaced element because the browser replaces the 
element with an image. Also, you can use display:inline-block to display any 
inline element as a block rendered within an inline context. 


Inline-block boxes participate in the inline flow like inline boxes but have 
margins, borders, padding, width, and height like block boxes. An inline-block 
box cannot be wrapped across lines. An inline-block box grows the height of a 
line to fit its height, padding, borders, and margins. An inline-block box can be 
shrinkwrapped, sized, or stretched. CSS provides the following properties for 
styling inline-block boxes: 


width and height set the width and height of the element. You can enlarge or 
shrink a replaced element, such as an image, by setting width and/or height to a 
measurement. You can set a replaced element to its natural size using width:auto 
and height:auto. You can size an inline-block element, such as a span assigned 
to display:inline-block, by setting width and/or height to a measurement. You 
can shrinkwrap an inline-block element using width:auto and height:auto. You 
can stretch an inline block using width: 100%. Note that a stretched inline block is 
the same as a block. 


margin has unique inline-block features. A positive value in margin-top expands 
the height of the line and a negative value shrinks it. A positive value in 
margin-bottom raises the element and a negative value lowers it. margin-bottom 
may also expand or shrink the height of a line. A positive value in margin-left 
moves the element away from the previous element, and a negative value moves 
it closer. A positive value in margin-right moves the next element further away, 
and a negative value moves it closer. 


border and padding expand the outer size of the inline element. This moves it 
to the right and moves following content to the right. It also moves it up and 
increases the height of the line containing it. 


SELECTOR { display:inline-block; line-height:+VALUE; 
overflow:VALUE; visibility:VALUE; 
width: «VALUE; height: «VALUE; 
margin:+VALUE; padding:+VALUE; 
border:+WIDTH STYLE COLOR; background:VALUES; } 


This design pattern applies to inline elements. 







EXE X04 


Firefox 2 does not support display:inline-block.]It has a proprietary property, 
display:-moz-inline-box, that works almost the same. 


The example shows an image and a span displayed as inline blocks. Note that 
you do not need to assign display:inline-block to replaced elements because a 
browser automatically displays them as inline blocks. 


Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5); 
Margin, Border, Padding, Background, Overflow, Visibility (Chapter 6) 


www. cssdesignpatterns.com/inline-block-box 
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Block Box 


©) Block Box - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Block Box 





BEFORE 


1 
Top 
— Left Right ^ 
Bottom 














HTML 


<h1>Block Box</h1> 


<div class="container"> 
<div class="default">BEFORE</div> 


«div class="box"> &uarr; «br /> Top «br /> &larr; Left &nbsp; &nbsp; &nbsp; 
Right &rarr; <br /> Bottom <br /> &darr; </div> 


«div class="default" >AFTER</div> 
</div> 


CSS 


*.box { display:block; 
overflow:auto; visibility:visible; 
width:220px; height:100px; 
margin:10px auto; padding:10px; } 
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/* Nonessential rules are not shown. 
See Inline Box for border and background properties. */ 
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Block Box 


Aliases 
Problem 


Solution 


Pattern 


Location 
Related to 


See also 


Block, block element, and static block box are synonyms with block box. 
You want to style the box of a block element. 


Block boxes flow vertically from top to bottom in a block formatting context. This 
is called the normal flow of blocks. Block boxes can contain other block boxes, or 
they can terminate the block formatting context and start an inline formatting 
context containing inline boxes. A terminal block creates an inline formatting 
context inside its inner box, but occurs within a block formatting context on the 
outside of its outer box. 


A block can be stretched to the width and height of its parent or sized smaller or 
larger than its parent. When sized larger, it overflows its parent. The overflow 
property controls how the browser handles overflow. 


width sets the width of the element. width:auto is the default value and stretches 
the element to fill the width of its parent. 


height sets the height of the element. height:auto is the default value and 
shrinkwraps the element to the height of all its child blocks or lines. 


margin-left and margin-right indent or outdent the sides of a stretched block, 
and they offset the sides of a sized block. You cannot horizontally shrinkwrap a 
block box. 


margin-top and margin-bottom push blocks further apart with positive values, 
but negative values bring them closer together, and can even overlap them. A 
browser collapses top and bottom margins of neighboring blocks. 


margin-left:auto and margin-right:auto control the horizontal alignment 
ofa sized block. When you size a block by setting width to a measurement, 
margin-right:auto aligns the block to the left side of its parent, and 
margin-left:auto aligns the block to the right side. When you set both 
margin-left and margin-right to auto, the block is aligned to the center 

of its parent (as shown in the example). 


border and padding expand the outer width and height of the box. This pushes 
down a block and its following blocks. On stretched blocks, horizontal borders 
and padding shrink the size of the inner box. On sized blocks, they offset the 
inner box. 


SELECTOR ( display:block; overflow:VALUE; visibility:VALUE; 
width: «VALUE; height: «VALUE; 
margin:+VALUE; padding:+VALUE; 
border:+WIDTH STYLE COLOR; 
background: VALUES; } 


This design pattern applies to block elements. 


Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5); 
Margin, Border, Padding, Background, Overflow, Visibility (Chapter 6) 







EXE X04 


www. cssdesignpatterns .com/block-box 
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Table Box 


©) Table Box - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Table Box 





BEFORE 


Table Cell Table Cell 














HTML 


<h1>Table Box Model</h1> 
<div class="container"> 
<table class="default"><tr><td>BEFORE</td></tr></table> 


<table class="table"> 
<tr><td class="cell">Table Cell </td><td class="cell">Table Cell </td></tr> 
</table> 


«table class="default"><tr><td>AFTER</td></tr></table> 


</div> 
4 
S CSS 
5 *.table ( 


border-collapse:separate; table-layout:auto; visibility:visible; 
width:auto; height:auto; margin:30px 50px; } 


*.cell ( width:auto; height:auto; padding:20px 50px; overflow:hidden; } 





/* Nonessential rules are not shown. 
See Inline Box for border and background properties. */ 
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Table Box 


Problem 


Solution 


Pattern 


Location 


Related to 


See also 


You want to style the box of a table and the boxes of its cells. 


A table is a block box on the outside containing rows of cells on the inside. A 
table participates in the block flow, and its cells participate in the table flow of 
rows and columns. A table has margins but does not have padding. A cell has 
padding but does not have margins. Two additional properties affect the Table 
Box model: border-collapse and table-layout. There are many design patterns 
for laying out cells inside a table. These are found in Chapters 15 and 16, which 
discuss tables and cells in detail. This design pattern focuses on the outside of 
the table, and how the table interacts with the position of surrounding elements. 


width sets the width of a table. Unlike other boxes, width refers to the outside of 
the borders rather than to the inside of its padding. 


height sets the height of the table. Unlike other boxes, height refers to the 
outside of the borders rather than to the inside of its padding. 


margin works differently depending on whether the table is sized, shrink- 
wrapped, or stretched. When sized or shrinkwrapped, margins offset the table 
and offset following elements. Negative margins can overlap the table with 
neighboring elements. When a table is stretched, margins indent the table, 
which decreases its internal size and shrinks its cells. 


border decreases the size of a table's inner box when a table is sized or stretched. 
No other sized box works like this. This unusual behavior occurs because table 
borders are inside the box specified by width and height. When the table is 
shrinkwrapped, border works like other boxes and increases the size of a table's 
outer box. 


overflow does not apply to tables because a table cannot overflow. Only a table's 
cells can overflow. overflow:hidden should be applied to cells to ensure 
consistent behavior in all browsers when fixed cells overflow. 


border-collapse determines whether or not adjacent borders combine into a 
single border. See Chapters 15 and 16 for details. 


table-layout determines whether the table is fixed sized or auto sized based on 
its content. See Chapters 15 and 16 for details. 


SELECTOR { display:table; visibility:VALUE; 
width:+VALUE; height:+VALUE; 
margin:+VALUE; border:+WIDTH STYLE COLOR; 
background: VALUES; 
border-collapse:VALUE; table-layout:VALUE; } 







EXE X04 


This design pattern applies to table elements. 


Table, Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched 
(Chapter 5); Margin, Border, Padding, Background, Overflow, Visibility 
(Chapter 6) 


Chapter 15 explains tables in much more detail. 


www. cssdesignpatterns .com/table-box 
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Absolute Box 


© Absolute Box - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Absolute Box 
ABSOLUTE 
BEFORE AFTER 


T AFTER 
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BEFORE 





HTML 
<h1>Absolute Box</h1> 
«div class="container" > 


<div class="default">BEFORE</div> 
<div class="box before">ABSOLUTE BEFORE</div> 


<div class="box">&uarr; <br /> Top <br /> &larr; Left &nbsp; &nbsp; 
&nbsp; Right &rarr; <br /> Bottom <br /> &darr; </div> 


<div class="box after">ABSOLUTE AFTER</div> 
«div class-"default"»AFTER«/div» 


«/div» 
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*.container { position:relative; } 


*.box ( position:absolute; overflow:auto; visibility:visible; 
z-index:auto; left:0; right:auto; top:0; bottom:auto; 
width:220px; height:100px; 
margin:10px; padding:10px;j 





*.before {width:100px; height:auto; left:400px; right:auto; top:100px; bottom:auto;] 
*.after {width:100px; height:auto; left:auto; right:Oopx; top:auto; bottom:Opx; } 


/* Nonessential rules are not shown. 
See Inline Box for border and background properties. */ 
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Absolute Box 


Problem 


Solution 


Pattern 


Location 
Tip 


Example 


Related to 


See also 


You want to style the box of an absolute or fixed element. 


An absolute element is removed from the normal flow and put in a layer above 
or below it. It is positioned in relation to its closest positioned ancestor or fixed 
to the viewport. It can be sized, shrinkwrapped, or stretched to its closest 
positioned ancestor. Any element can be positioned absolutely. Unlike other 
boxes, the position of an absolute box does not affect the position of other boxes. 
Absolute boxes may overlap freely. 


z-index controls the stacking order of positioned elements. A negative value 
places them below the normal flow, and a positive value places them above the 
flow. Larger values move them closer to the user in the stacking order. 


left, right, top, and bottom apply to absolute boxes. When set to a measurement, 
left aligns the left side of an absolute element to the left side of its container and 
offsets it by a positive or negative value. right, top, and bottom work analogously. 
When left, right, top, and bottom are all set to auto, a browser renders the 
absolute box in the same position it would have had if it were rendered in the 
normal flow. 


width sets the width of the element. width:auto is the default value. When width 
is auto and both left and right are auto, the box is shrinkwrapped. When width 
is auto and both left and right are 0 or some other value, the box is stretched. 
When width is a value, left is a value, and right is auto, the box is sized and 
offset from the left. When width is a value, left is auto, and right is a value, the 
box is sized and offset from the right. 


height sets the height of the element. height, top, and bottom work analogously 
to width, left, and right. 


margin assigned to a positive value moves a side of an absolute box toward the 
center of its container, and a negative value moves it away from center. 


border and padding shrink the inner box of stretched absolute boxes. border and 
padding expand the outer box of sized and shrinkwrapped absolute boxes and 
move them toward the center of their container. 


SELECTOR { position:ABSOLUTE FIXED; z-index:+VALUE; 
overflow:VALUE; visibility:VALUE; 
left:xVALUE; right:+VALUE; top:+VALUE; bottom:+VALUE; 
width: +VALUE; height: +VALUE; 
margin:+VALUE; padding:+VALUE; 
border:+WIDTH STYLE COLOR; background:VALUES; } 


This design pattern applies to all elements. 







EXE X04 


Chapters 7 through 9 show how to position absolute boxes. 


Notice how all three absolute boxes are removed from the flow, which brings 
together the static BEFORE and AFTER blocks. 


Positioned (Chapter 7); Display, Box Model (Chapter 4); Width, Height, Sized, 
Shrinkwrapped, Stretched (Chapter 5); Margin, Border, Padding, Background, 
Overflow, Visibility (Chapter 6) 


www. cssdesignpatterns .com/absolute-box 


92 CHAPTER 4 ™ BOX MODELS 


Floated Box 


m 
J Floated Box - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Floated Box 
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HTML 
<h1>Floated Box</h1> 
<div class="container"> 


<div class="default">BEFORE</div> 
«div class="box small">FLOAT BEFORE</div> 


<div class="box">&uarr; <br /> Top <br /> &larr; Left &nbsp; &nbsp; 
&nbsp; Right &rarr; <br /> Bottom <br /> &darr; </div> 


«div class="box small">FLOAT AFTER</div> 


«div class="default" >AFTER</div> 
</div> 


CSS 


n 
zi 
lu 
=) 
(=) 
= 
>< 
S 
a 


*.box { float:left; overflow:auto; visibility:visible; 
width:220px; height:100px; 
margin:10px; padding:10px; } 


*.small { width:75px; height:auto; } 





/* Nonessential rules are not shown. 
See Inline Box for border and background properties. */ 
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Floated Box 


Problem 


Solution 


Pattern 


Location 


Example 


Related to 


See also 


www. cssdesignpatterns .com/float-box 


You want to style the box of a float. 


You can float any element using float: left or float: right. A float is removed 
from the normal flow and placed above the borders and backgrounds of adjacent 
blocks. This shrinks the float’s parent and collapses it completely when all its 
children are floated. Even though a float is removed from the flow, it indents 
adjacent content in the flow. Left floats indent adjacent content to the right, 

and right floats indent content to the left. A float is positioned vertically at the 
location in which it would have been rendered in the normal flow. It is positioned 
horizontally inside its parent’s padding area on the left or right. A float stacks next 
to other floats in the same general vertical location. When a float cannot fit next to 
another float, it moves down below it. A float’s position, size, padding, borders, 
and margins affect the position of adjacent floats and adjacent inline content. The 
precise location of a float cannot be predetermined. 


width sets the width of the float. width: auto is the default value and shrinkwraps 
the float to fit the width of its widest line. 


height sets the height of the float. height : auto is the default value and 
shrinkwraps the float to the height of all its child blocks or lines. 


margin has unique float features. A positive margin pushes the float away from its 
point of alignment and pushes other floats and inline content away from it. A 
negative margin pulls the float to the other side of its point of alignment and pulls 
other floats and inline content closer. Margins around floats do not collapse. 


border and padding expand the outer size of a float. The left border and padding 
of a left float moves the float to the right, and its right border and padding moves 
other floats and inline content on the right further to the right. This applies vice 
versa for right floats. Top border and padding move the float down. The bottom 
border and padding move down any floats below the float, and extends the float’s 
effect on adjacent content in the normal flow. 


SELECTOR { float:LEFT RIGHT; width:+VALUE; height:+VALUE; 
z-index:+VALUE; margin:+VALUE; padding:+VALUE; 
border:+WIDTH STYLE COLOR; background: VALUES; 
overflow:VALUE; visibility:VALUE; } 


This design pattern applies to all elements. 


The three floats in the example are removed from the flow, which brings together 
the static BEFORE and AFTER boxes and shrinks the height of the floats’ parent. 
The three floats stack next to each other from left to right. The AFTER text is 
moved to the right by the last float. Margins, borders, and padding expand the 
floats’ outer boxes and push away other floats. 


Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5); 
Margin, Border, Padding, Background, Overflow, Visibility (Chapter 6) 
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CHAPTER 5 


Box Model Extents 


This is the second of three chapters on the Box Model. It shows how boxes can be sized, 
shrinkwrapped, and stretched. The previous chapter discusses the six main types of boxes: 
inline, inline-block, block, table, absolute, and floated. The next chapter discusses properties 
that style the box. 

Each type of box works differently. The design patterns in this chapter show how to apply 
width and height to each type of box to size, shrinkwrap, or stretch it. Horizontal and vertical 
dimensions are independent. You can freely combine different vertical and horizontal design 
patterns. For example, you can stretch horizontally and shrinkwrap vertically. 


Chapter Outline 


Width contrasts how width can size, shrinkwrap, or stretch each type of box. 
Height contrasts how height can size, shrinkwrap, or stretch each type of box. 


Sized shows how to set the height or width of an element. An element is sized when you 
manually assign it a height and/or a width. For example, you can use height :50% to size 
an element’s height to 50% of the height of its container. 


Shrinkwrapped shows how to shrink the width or height of an element to the size of 
its content. For example, height: auto causes the height of a static block element to 
expand automatically to fit the total height of its lines, and width: auto causes the width 
of an absolute element to shrink to fit to the width of its widest line. 


Stretched shows how to stretch the width or height of an element to the sides of its con- 
tainer. For example, width: auto causes the width of a static block element to expand 
automatically to fit the width of its container. For example, top:0, bottom:0, and 
height:auto cause an absolute element to expand automatically to fit the height of its 
container. A stretched element' left side aligns to the left side of its container, and its 
right side aligns to the right side of the container. Similarly, its top and bottom sides 
align to the top and bottom sides of its container. 
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Width 


© Width - Mozilla Firefox 


Ele Edit View Go Bookmarks Tools Help 


Width 


Static Inline Shrinkwrapped 


Static Block Sized 


Static Block Stretched Auto 


Table Shrinkwrapped 
Table Sized 
Table Stretched 100% 
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CSS 


.static-inline-shrinkwrapped ( width:auto; } 
.replaced-inline-shrinkwrapped { width:auto; } 
.replaced-inline-sized ( width:35px; } 
.replaced-inline-stretched { width:100%; } 


* * * X 


* 


.static-block-sized { width:300px; } 
*.static-block-stretched { width:auto; } 


*.table-shrinkwrapped { width:auto; } 
*.table-sized { width:300px; } 
*.table-stretched { width:100%; } 


*.float-shrinkwrapped ( width:auto; float:left; } 
*.float-sized ( width:300px; float:left; clear:both; } 
*.float-stretched { width:100%; float:left; clear:both; } 
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*.absolute-shrinkwrapped { width:auto; left:0; right:auto; position:absolute; } 
*.absolute-sized { width:300px; left:0; right:auto; position:absolute; } 
*.absolute-stretched { width:auto; left:0; right:0; position:absolute; } 





Width 


Problem 


Solution 


width:auto 


width: +VALUE 


width: 100% 


Pattern 
Location 


Tips 


Example 


Related to 


See also 
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You want to set the width of an element to size it, shrinkwrap it, or stretch it. 
CSS provides the width property for this purpose. 


This design pattern is an introduction to the Sized, Shrinkwrapped, and 
Stretched design patterns. The purpose of this design pattern is to compare how 
width applies to all six main types of boxes: inline, inline-block, block, table, 
absolute, and floated. This comparison makes it easy to choose the proper 
combination of width, element, and display box to create the layout you want. 


width works on all types of elements except for inline elements. width works 
differently depending on the type of element and whether or not it is positioned 
or floated. width is completely independent from height. width: auto is the 
default. 


width: auto horizontally shrinkwraps the following boxes: inline, inline-block, 
floated, table, and absolute (when both left and right are auto). 

width: auto horizontally stretches block boxes and absolute boxes (when left and 
right are both set to a value, such as 0). 


You can size an element by assigning pixels, ems, a percentage, or another fixed 
measurement to width. Fixed-width elements may not be user friendly when the 
viewport is much larger or much smaller than expected. Percentages are more 
flexible because they can scale to the viewport. 


width: 100% stretches an element to the width of its parent, but unlike auto, 
width: 100% has limitations. A browser does not automatically adjust the width 
to keep the element stretched. An element’s horizontal margins, borders, or 
padding can expand its width beyond the width of the parent. 


SELECTOR { width:+VALUE; } 
width applies to all elements except for inline elements. 


A browser ignores width on a static inline element because font and font-size 
determine the width of its text, which sets the element’s width. 


Tables stretched using width: 100% work almost as well as horizontally stretched 
absolute elements. When you assign borders or padding to a table, the outer box 
of a table does not expand, and the table does not overflow its parent. This is 
because borders and padding are rendered on the inside of the table and do 

not expand its outer box. On the other hand, a margin assigned to a table will 
reposition the table, and it will overflow its parent. 


The example illustrates all ways of using width to create horizontally 
shrinkwrapped, stretched, and sized elements. I omitted nonessential CSS 
rules and the HTML code to fit the example on one page. The text in the 
element is the name of its class. The replaced element is an image of a star. 


Sized, Shrinkwrapped, Stretched; Static, Absolute, Float (Chapter 7); 
Table (Chapter 15) 


www.cssdesignpatterns.com/width 
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C 


HAPTER 5 .. BOX MODEL EXTENTS 


Height 


© Height - Mozilla Firefox 





File Edit View History Bookmarks Tools Help 


Height 





Block 
Shrinkwrapped i Stretched 
100% 


Table Table 
Shrinkwrapped Stretched 
100% 


Float i Float 


Shrinkwrapped Stretched 
100% 


Absolute Absolute Absolute 
Shrinkwrapped Sized Stretched 


Auto 














CSS 


* * * 


* * * 


* * * 


.replaced-inline-shrinkwrapped { height:auto; } 
.replaced-inline-sized { height:65px; } 
.replaced-inline-stretched { height:100%; } 


.block-shrinkwrapped { height:auto; } 
.block-sized { height:65px; } 
.block-stretched { height:100%; } 


.table-shrinkwrapped { height:auto; } 
.table-sized { height:65px; } 
.table-stretched { height:100%; } 


*.float-shrinkwrapped { height:auto; float:left; } 


* * 


* * * 


.float-sized { height:65px; float:left; } 
.float-stretched { height:100%; float:left; } 


.absolute-shrinkwrapped { height:auto; top:0; bottom:auto; position:absolute; } 
.absolute-sized { height:65px; top:0; bottom:auto; position:absolute; } 
.absolute-stretched { height:auto; top:0; bottom:0; position:absolute; } 


Height 


Problem 


Solution 


height:auto 


height :+VALUE 
height: 100% 


Pattern 
Location 


Tips 


Example 


Related to 


See also 


CHAPTER 5 BOX MODEL EXTENTS 99 


You want to set the height of an element to size it, shrinkwrap it, or stretch it. 


CSS provides the height property for this purpose. This design pattern is an 
introduction to the Sized, Shrinkwrapped, and Stretched design patterns. The 
purpose of this design pattern is to compare how height applies to all six main 
types of boxes: inline, inline-block, block, table, absolute, and floated. This 
comparison makes it easy to choose the proper combination of height, 
element, and display box to create the layout you want. 


height works on all types of elements except for inline elements. height works 
differently depending on the type of element and whether or not it is 
positioned or floated. height is completely independent from width. 

height: auto is the default. 


height:auto vertically shrinkwraps the following boxes: inline, inline-block, 
block, floated, table, and absolute (when both top and bottom are auto). 
height: auto also vertically stretches an absolute box when top and bottom are 
both set to a value, such as 0. This is the best way to vertically stretch a box 
because height : 1007 has limitations, but it is only available for absolute boxes. 


You can size an element by assigning pixels, ems, a percentage, or another fixed 
measurement to height. Fixed heights may not be user friendly when the 
viewport is much larger or much smaller than expected. Percentages are more 
flexible because they can scale to the viewport. 


height:100% stretches an element to the height of its parent, but unlike auto, 
height: 100% has limitations. A browser does not automatically adjust the height 
to keep the element stretched. An element's vertical margins, borders, or 
padding can expand its height beyond the height of the parent. 


SELECTOR { height:+VALUE; } 
height applies to all elements except for inline elements. 


A browser ignores height on a static inline element because font and font-size 
determine the height of its text, which sets the element's height. 


Tables stretched using height : 100% work almost as well as vertically stretched 
absolute elements. When you assign borders or padding to a table, the outer 
box of a table does not expand, and the table does not overflow its parent. This 
is because borders and padding are rendered on the inside of the table and do 
not expand its outer box. On the other hand, a margin assigned to a table will 
reposition the stretched table and overflow its parent. 


The example illustrates all ways of using height to create vertically 
shrinkwrapped, stretched, and sized elements. I omitted nonessential CSS 
rules and the HTML code to fit the example on one page. The text in the 
element is the name of its class. The replaced element is an image of a star. 


Sized, Shrinkwrapped, Stretched; Static, Absolute, Float (Chapter 7); Table 
(Chapter 15) 


www.cssdesignpatterns.com/height 
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CHAPTER 5 ™ BOX MODEL EXTENTS 


Sized 


© Sized - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Sized 


Positioned Grandparent 





positioned Parent 


Sized Static Sized Absolute Sized Float 
X 
Sized Table 





HTML 


<h1>Sized</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<div id="float" class="z">Sized Float</div> 
<div id="static" class="z">Sized Static</div> 
«table id="table" class-"z"»«tr»«td»Sized Table</td></tr></table> 
<span id="abs" class="z">Sized Absolute 
<img id="star" src="star.gif" alt="star" /></span> 
</div> 
</div> 


CSS 


*.z { padding:5px; border:5px solid black; } 


#float { width:150px; height:50px; } 
#static ( width:150px; height:5Opx; } 
#table ( width:150px; height:50px; } 
Habs { width:150px; height:50px; } 
#star { width:26px; height:26px; } 


/* Nonessential rules are not shown. */ 


Sized 


Problem 


Solution 


Pattern 
Location 


Explanation 


Related to 
See also 


CHAPTER 5 BOX MODEL EXTENTS 101 


You want to set the height and/or width of an element to a measurement or a 
percentage of its containing block's height and width. 


Apply styles to your chosen class or ID as follows: 


- Use height to set the height of an element to a measurement or a percentage 
of the height of its container. 


- Use width to set the width of an element to a measurement or a percentage of 
the width of its container. 


- You can assign width and height independently. In other words, you can size 
the height only, the width only, or both height and width. 


- If you do not want to size the height or width, you can set width or height to 
auto. auto is the default value for width and height. 


SELECTOR { width:+VALUE; height:+VALUE; } 
This pattern applies to all elements except for static inline elements. 


Sized elements require width and height to be set to a measurement or 
percentage. A percentage of 100% is used to stretch an element, but any other 
percentage sizes the element smaller or larger than its container. 


height and width specify the inner box of an element. Padding surrounds the 
inner box. Borders surround the padding. Margins surround the borders. The 
box surrounding the margins is the outer box. Padding, borders, and margin 
expand the outer box and have no effect on the height and width of the inner 
box. Negative margins may cause adjacent elements to overlap an element, but 
they do not change its height and width. 


Tables are an exception where height and width specify the outside of the 
table's border. This causes borders and padding to be placed inside the 
specified height and width. This is why the table in the example is smaller 
than the other elements. 


When a float is sized, it changes the flow. width changes the left and right 
boundaries in which the float's content is flowed, affecting the location of 
adjacent content and floats. height pushes down or pulls up adjacent floats. 


When a static block element is sized, it changes the flow. height pushes down 
or pulls up the following block element. height also shrinks or grows the height 
of its parent (unless the parent is also sized). width changes the left and right 
boundaries in which content is flowed. 


When an absolute element is sized, it does not change the flow and it does not 
change the position of other elements. Percentages in width and height refer to 
its closest positioned ancestor's width and height. 


When sizing a replaced element, such as an image, the browser scales it to the 
specified size. To use the intrinsic size, set height and width to auto. 


Width, Height, Shrinkwrapped, Stretched; Static, Absolute, Float (Chapter 7) 


Www. Ccssdesignpatterns.com/sized 
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Shrinkwrapped 


© Shrinkwrapped - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Shrinkwrapped 


Positioned Grandparent 


Non-positioned Parent f Shrinkwrapped Static Inline 


\ 








PA 
Shrinkwrapped Float Shrinkwrapped Absolute 
Vertically Shrinkwrapped Static Block 
Shrinkwrapped Table 





HTML 


<h1>Shrinkwrapped</h1> 


<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<span id="float" class="z">Shrinkwrapped Float</span> 
<span id="inline" class="z">Shrinkwrapped Static Inline</span><br /> 
<img id="star" src="star.gif" alt="star" /> 
<div id="block" class="z">Vertically Shrinkwrapped Static Block</div> 
<table id="table" class-"z"»«tr»«td»Shrinkwrapped Table</td></tr></table> 
<span id="abs" class="z">Shrinkwrapped Absolute</span> 
</div> 
</div> 


CSS 


#float { width:auto; height:auto; float:left; } 

#inline { width:auto; height:auto; } 

"star { width:auto; height:auto; } 

#block { width:auto; height:auto; } 

#table { width:auto; height:auto; } 

#abs { width:auto; height:auto; left:auto; bottom:auto; position:absolute; } 
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/* Nonessential rules are not shown. */ 





CHAPTER 5 BOX MODEL EXTENTS 


Shrinkwrapped 


Problem 


Solution 


Patterns 


Location 
Limitations 
Explanation 


Tip 


Related to 
See also 


You want to shrinkwrap the width and/or height of an element to fit the width or 
height of its content. 


Apply styles to your chosen class or ID as follows: 
- Use height:auto to shrink the height to the height of all its lines. 
- Use width:auto to shrink the width to the width of its widest line. 


- width and height are independent. For example, you can shrinkwrap one and 
size the other. 


Shrinkwrapped Float 
SELECTOR { width:auto; height:auto; float:LEFT RIGHT; j 


Shrinkwrapped Static Inline Element 
INLINE-SELECTOR { width:auto; height:auto; } 


Shrinkwrapped Static Inline-block Element 
INLINE-BLOCK-SELECTOR { width:auto; height:auto; } 


Vertically Shrinkwrapped Static Block Element 
BLOCK-SELECTOR { height:auto; } 


Shrinkwrapped Table Element 
TABLE-SELECTOR { width:auto; height:auto; } 


Horizontally Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; width:auto; 

left:0; right:auto; } 
or 
SELECTOR { position:absolute; width:auto; 
left:auto; right:0; } 


Vertically Shrinkwrapped Absolute Element 

SELECTOR { position:absolute; height:auto; 

top:0; bottom:auto; } 

or 

SELECTOR { position:absolute; height:auto; 
top:auto; bottom:0; } 











This pattern applies to all elements. 
You cannot horizontally shrinkwrap a static block. 


Shrinkwrapped elements require width and height to be set to auto so that the 
browser can automatically size the box based on the width and height of its 
content. Absolute elements also require left or right, and top or bottom to be 
set to auto to prevent them from being stretched. 


Because a shrinkwrapped table is sized based on its content, its behavior is the 
same as any other shrinkwrapped element. Contrast this to a sized table where 
the height and width are assigned to the outside of the table’s border, causing it 
to be sized differently from other elements. 


Width, Height, Sized, Stretched; Static, Absolute, Float (Chapter 7) 


www. cssdesignpatterns.com/shrinkwrapped 
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Stretched 


© Stretched - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Stretched 


Vertically 


Non-positioned Parent f Cannot stretch a static inline Stretched 


T Absolute 
WwW 


pA 





Horizontally Stretched Static Block 
(aaa 
Horiz. Stretched Table 
(~a 


Horizontally Stretched Absolute 


Almost Stretched Float 








HTML 


<h1>Stretched</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<span id="inline" class="s">Cannot stretch a static inline</span> 
«div — idz"sized"»«img id="star" src-"star.gif" alt-"star" /></div> 
«div — id-"block" class="s">Horizontally Stretched Static Block«/div» 
«table id="table" class="s"><tr><td>Horiz. Stretched Table</td></tr></table> 
«div id="abs-v" class="s">Vertically Stretched Absolute</div> 
«span id="abs-h" class="s">Horizontally Stretched Absolute</span> 
«span id="float" class="s">Almost Stretched Float</span> 
</div> 
</div> 


CSS 


#star { width:100%; height:100%; } 

#block { width:auto; } 

#table { width:100%; } 

#abs-v ( height:auto; top:0; bottom:0; position:absolute; } 
#abs-h { width:auto; left:0; right:0; position:absolute; } 
#float ( width:100%; float:left; } 


/* Nonessential rules are not shown. */ 


CHAPTER 5 BOX MODEL EXTENTS 


Stretched 


Problem 


Solution 


Patterns 


Location 


Limitations 


Example 


Related to 
See also 


You want to stretch the width or height of an element to fill the width or height of 
its container. In other words, you want to stretch the outer box of an element to 
the sides of its container. 


You can stretch a box by applying width: auto, width:1007, height:auto, or 
height:100% to different types of boxes. 


When using width:auto or height:auto, a browser calculates the width and 
height of stretched elements from the outside in. A browser starts with the inner 
box of the parent, and subtracts the stretched element's margins, borders, and 
padding to calculate its inner box. Contrast this with sized and shrinkwrapped 
elements, which are sized from the inside out. 


- Use width:auto to stretch the width of a block to the sides of its parent. 


- Use width:auto, left:0, and right:0 to stretch an absolute element to the left 
and right sides of its closest positioned ancestor. 


- Use height: auto, top:0, and bottom:0 to stretch an absolute element to the top 
and bottom of its closest positioned ancestor. 


- Use width: 100% to stretch a table, a float, or an inline block. This works as long 
as the box does not have horizontal margins. Otherwise, it overflows its parent, 
and the stretch effect is lost. Stretched floats and inline blocks also overflow their 
parent when they have horizontal borders or padding. 


- Use height: 100% to stretch the height of inline blocks, blocks, tables, and floats 
to the height of their containers. If the stretched element is not the first and only 
child in its container, this technique will overflow the container. 


Stretched Inline-block Element 
INLINE-BLOCK-SELECTOR { width:100%; height:100%; } 


Stretched Static Block Element 
BLOCK-SELECTOR { width:auto; height:100%; } 


Stretched Table 
TABLE-SELECTOR { width:100%; height:100%; } 


Vertically Stretched Absolute Element 
SELECTOR { height:auto; top:0; bottom:0; position:absolute; } 


Horizontally Stretched Absolute Element 
SELECTOR { width:auto; left:0; right:0; position:absolute; } 


Stretched Float 
SELECTOR { width:100%; height:100%; float:LEFT RIGHT; } 


This pattern works on all elements except for inline elements. 


Internet Explorer 6 cannot stretch absolute elements, but version 7 can. An 
absolutely positioned table is stretched using width: 100% and height : 100%. 


The star image is the only child inside a 50-pixel centered division, and is 
stretched to all four sides of its parent. Notice how the float is not stretched 
perfectly because its padding and border causes it to overflow its parent. 


Width, Height, Sized, Shrinkwrapped; Static, Absolute, Float (Chapter 7) 


www. cssdesignpatterns.com/stretched 
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CHAPTER 6 


Box Model Properties 


This chapter shows how box model properties style the various types of boxes. These are 
basic design patterns. 

The Margin, Border, and Padding design patterns contain examples contrasting how each 
property works in each type of box. Their main purpose is to contrast in one place how the 
same property means different things in different contexts. When using this book as a refer- 
ence, you may also want to refer to the Margin, Border, and Padding design patterns to 
determine which type of element, box, and property will do what you want. 


Chapter Outline 


Margin contrasts how margins work differently for different types of boxes. It shows 
how margins change the position of an element in relation to its container and siblings. 


Border contrasts how borders work differently for different types of boxes. It shows how 
borders change the position of an element in ways similar to margins, and in some 
ways different from margins. 


Padding contrasts how padding works differently for different types of boxes. It shows 
how padding works almost identically to borders and margins. 


Background shows how to assign a color to the background of an element. It also 
shows how to use a tiled image for the background. You can tile the image across and 
down, across only, down only, or show the image only once. You can position the image 
at a specific location in the background. You can also direct whether the image scrolls 
with the content or remains in a fixed location. 


Overflow shows how to hide overflowing content, display it, or display scrollbars. 
Visibility shows how to hide an element while leaving a placeholder for it in the flow. 


Page Break shows how to insert a page break into your document before an element or 
after an element. It also shows how to print blank pages. 
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Margin 


© Margin - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 
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| Static Inline Shrinkwrapped 


rd X a i 


Static Block Sized 
Static Block Stretched Auto 


Table Shrinkwrapped 











Table Sized 
Table Stretched 10096 


oat Shrinkwrapped| 


Float Sized Table Stretched 100% 


Float Stretched 100% 
Float Shrinkwrapped 


Float Sized 
Float Stretched 100% 


Absolute annnka ppe Absolute Shrinkwrapped 
Absolute Sized Absolute Sized 
Absolute Stretched Auto ea eE cca Aus 


Table Sized 














CSS 


* before { margin:0; } 


*.after ( margin-top:10px; margin-bottom:0; 
margin-left:30px; margin-right:10px; ] 


/* Nonessential rules are not shown. 
HTML code is omitted to allow the example to fit on one page. */ 


Margin 
Problem 


Solution 


margin:+VALUE 


margin: auto 


Pattern 


Location 


Related to 


See also 


CHAPTER 6 .. BOX MODEL PROPERTIES 


You want to put a margin on one or more of the sides of an element. You want the 
margin to be transparent to the background of the element's parent. 


You can use a selector to assign the margin property to an element. You can 
independently set margin-left, margin-right, margin-top, and margin-bottom. 
margin can be positive or negative. Negative values may overlap elements. margin 
works differently depending on the type of element. 


You can assign a measurement or percentage to margin. A percentage refers to a 
percentage of the containing block's width. margin:0 is the default CSS value, but 
browsers assign different default margins to specific elements. 


-Onaninline element, margin-top and margin-bottom are ignored. 


- On an inline or inline-block element, a positive value in margin-left moves 
the element away from the previous element, and a negative value moves it 
closer. A positive value in margin-right moves the next element further away, 
and a negative value moves it closer. 


- On an inline-block element, such as an image, a positive value in margin-top 
expands the height of the line and a negative value shrinks it. A positive value in 
margin-bottom raises the element, and a negative value lowers it. 


- On a sized block element, a positive or negative value in margin-left and 
margin-right offsets it from its point of alignment. A positive value in margin-top 
and margin-bottom pushes neighboring blocks further apart, and a negative value 
brings them closer together. A browser collapses top and bottom margins of 
neighboring block elements. 


- On astretched block or stretched absolute element, a positive margin indents 
the sides of the element, and a negative value outdents them. Indents shrink an 
element’s inner box, pushing borders and padding inward. 


- On a table or a sized or shrinkwrapped absolute element, a positive or 
negative margin value offsets it from its point of alignment. Margins on a 
stretched table do not indent the table, but cause it to overflow its container. 


- On a float, a positive margin pushes the float away from its point of alignment, 
and pushes other floats and inline content away from it. A negative margin pulls 
the float to the other side of its point of alignment, and pulls other floats and 
inline content closer. Margins on a stretched float do not indent the float but 
cause it to overflow its container. 


On most elements, margin: auto is the same as margin:0, (i.e., no margin). 


- On astatic block element and a stretched absolute element, auto 
automatically expands the margin. For example, margin-left:auto and 
margin-right:0 aligns a sized element to the right. 


SELECTOR { margin:+VALUE; } 


margin works on most elements. It does not work on internal table elements, 
such as table cells. Vertical margins do not work on inline elements. 


Border, Padding; all patterns in Chapters 4, 7, 8 and 9; Spacing, Inline Spacer, 
Linebreak, Inline Horizontal Rule (Chapter 11); Text Indent, Hanging Indent 
(Chapter 12); Lists, Background Bulleted, Collapsed Margins, Horizontal Rule, 
Block Spacer, Block Spacer Remover, Left Marginal, Right Marginal (Chapter 13); 
Outside-in Box, Float Divider (Chapter 17) 


www.cssdesignpatterns.com/margin 
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Border 


© Border - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 
Border 


Before 
Static Inline Shrinkwrapped 





Table Stretched 100% 


loat Shrinkwrapped| 
loat Sized 
Float Stretched 100% 





Absolute Shrinkwrapped 
Absolute Sized 
Absolute Stretched Auto 


CSS 
*.before { border:1px solid black; } 


*.after ( border-top:10px solid dimgray; 


Static Block Sized 
Static Block Stretched Auto 


Table Shrinkwrapped 


Table Sized 
Table Stretched 100% 





Float Shrinkwrapped 
Float Sized 
Float Stretched 100% 


Absolute Stretched Auto 
o | 





border-bottom:1px solid black; 


border-left:30px solid black; border-right:5px solid black; } 


/* Nonessential rules are not shown. 


HTML code is omitted to allow the example to fit on one page. */ 


Border 


Problem 


Solution 


Pattern 


Location 
Related to 


See also 


CHAPTER 6 ™ BOX MODEL PROPERTIES 


You want to put a border on one or more of the sides of an element. 


You can use a selector to assign the border property to an element. You can 
independently set border-left, border-right, border-top, and border-bottom. 
border affects an element differently depending on the type of element and its 
alignment. You can set the style and color of the border. border:none is the 
default. 


Borders work almost identically to margins. Borders work like margins in the way 
they change the position of an element and the position of its neighbors. 


The descriptions in the Margin design pattern apply to borders except as follows: 


- Borders are visible instead of transparent, but you can set the color of a border 
to transparent if you want. (Note that Internet Explorer 6 does not support 
transparent as a color, but version 7 does.) 


- Borders cannot be negative because they are inside the margin. 
- Borders between static block elements do not collapse like margins. 


- Left and right borders around inline text elements are only visible at the start of 
the element and at the end of the element. Right and left borders are not drawn 
where a browser wraps an inline element across lines. 


- Top and bottom borders on inline elements overlap neighboring lines unless 
you increase the line height to make room for them. In other words, vertical 
inline borders do not automatically increase the height of the line. Notice in the 
example how the border above the text "Static Inline Shrinkwrapped" overlaps 
the top of its container, and how the word "Element" overlaps the previous line. 


- Sincea table's width and height refer to the outside of its borders (rather than to 
the inside of its padding), borders are drawn inside the box specified by width 
and height. This means borders do not add to the size of shrinkwrapped or sized 
tables. This also means borders on a stretched table do not cause it to overflow 
its container; instead, they indent the table like a stretched block or a stretched 
absolute element. Notice in the example how the width of the sized table's outer 
box does not change when borders are enlarged; instead, the inner box shrinks. 
Also notice how borders indent the stretched table instead of causing it to 
overflow its container like it did in the Margin design pattern and like the 
stretched float does in this example. 


SELECTOR ( border: WIDTH STYLE COLOR; 
border: none; 
border-left: WIDTH STYLE COLOR; 
border-right: WIDTH STYLE COLOR; 
border-top: WIDTH STYLE COLOR; 
border-bottom: WIDTH STYLE COLOR; } 


This design pattern applies to all elements. 


Margin, Padding; all Box Model patterns in Chapter 4; Absolute (Chapter 7); Text 
Decoration (Chapter 10); Inline Decoration, Inline Horizontal Rule (Chapter 11); 
Horizontal Rule (Chapter 13); Table, Separated Borders, Collapsed Borders, 
Styled Collapsed Borders, Hidden and Removed Cells (Chapter 15); Outside-in 
Box, Float Divider, Tab Menu (Chapter 17) 


www. cssdesignpatterns.com/border 
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Padding 


© Padding - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Padding 


Before 
Static Inline Shrinkwrapped 
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Static Block Stretched Auto Static Block Sized 


Table Shrinkwrapped Static Block Stretched Auto 
Table Sized Table Shrinkwrapped 


Table Stretched 10096 
Table Sized 


oat Shrinkwrapped| 
Float Sized Table Stretched 100% 


Float Stretched 100% 
Float Shrinkwrapped 
Float Sized 
Float Stretched 100% 








Absolute Shrinkwrapped ABENE RERAN OET 

absolute Sized Eee Ceu 

Absolute Stetched Aut 
aa 





CSS 
*.before { padding:0; } 


*.after ( padding-top:10px; padding-bottom:0; 
padding-left:30px; padding-right:10px; j 


/* Nonessential rules are not shown. 
HTML code is omitted to allow the example to fit on one page. */ 


Padding 


Problem 


Solution 


Pattern 


Location 


Tips 


Related to 


See also 


CHAPTER 6 ™ BOX MODEL PROPERTIES 


You want to use padding on one or more of the sides of an element. 


Use a selector to assign the padding property to an element. You can 
independently set padding-left, padding-right, padding-top, and padding- 
bottom. padding affects the position of an element differently depending on the 
type of element and its alignment. The element's background is displayed in 
the padding area. padding:0 is the default. 


Padding works almost identically to borders. 


- Padding works like margins and borders in the way it changes the position of 
an element and the position of its neighbors. 


- Like borders, top and bottom padding on inline elements overlap 
neighboring lines unless you increase the line height to make room for them. 


- Like borders, padding does not add to the size of shrinkwrapped or sized 
tables, and applying padding to the cells of a stretched table does not cause 
the table to overflow its container. 


The remaining descriptions in the Border and Margin design patterns apply to 
Padding except as follows: 


- Borders are transparent to the element's background. Contrast this with 
margins, which are transparent to the parent's background, and borders, 
which are styled. 


- Padding cannot be negative because it is inside the border. 


- Padding does not apply to tables, but it does apply to table cells. In the 
example, I applied padding to the cells in the table rather than to the table. 


- Padding defaults to 0, which is no padding. 


SELECTOR ( padding: «WIDTH; 
padding: 0; 
padding: «VERTICAL +HORIZONTAL; 
padding: «TOP «RIGHT «BOTTOM «LEFT; 
padding-left: «WIDTH; 
padding-right: «WIDTH; 
padding-top: «WIDTH; 
padding-bottom: «WIDTH; } 


This design pattern applies to all elements. 


Margins and borders share the same shortcut notation. You can set all four 
margins and borders using one width; you can set the vertical and horizontal 
using two widths; or you can set the four individual sides using four widths. 
The four sides start with the top and move clockwise around the box to the 
right, bottom, and left. 


Margin, Border; all Box Model patterns in Chapter 4; Highlight, Text 
Decoration (Chapter 10); Spacing, Padded Content, Inline Decoration 
(Chapter 11); Hanging Indent (Chapter 12); Lists, Background Bulleted 
(Chapter 13); Basic Shadowed Image (Chapter 14); Outside-in Box 
(Chapter 17) 
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CHAPTER 6 ™ BOX MODEL PROPERTIES 


Background 


© Background - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Background 


No background 

Background color 

Background image not tiled 
Lee eeeee@ Background image tiled 
.0.0000.0.0 Background image repeat-x 

Background image repeat-y — 


Background image center bottom 


* 
* 
* 
* 
* 
* 
* 
* 
* 
* 


Background image right bottom 


HTML 


<h1>Background</h1> 

<p><span class="no-bg">&nbsp;</span>No background</p> 

<p><span class="bg-color">&nbsp;</span>Background color</p> 

<p><span class="bg-image">&nbsp;</span>Background image not tiled</p> 
<p><span class-"bg-repeat"»8nbsp;«/span»Background image tiled</p> 
<p><span class="bg-rx">&nbsp;</span>Background image repeat-x«/p» 

«p»«span class="bg-ry">&nbsp;</span>Background image repeat-y &rarr;«/p» 
«p»«span class="bg-pos-1t">&nbsp;</span>Background image center bottom«/p» 
<p><span class="bg-pos-rb">&nbsp;</span>Background image right bottom«/p» 


CSS 


p ( margin-left:240px; margin-top:Opx; margin-bottom:10px; } 

span ( margin-left:-230px; margin-right:30px; padding-left:195px; font-size:19px; 
background-position:left bottom; background-repeat:no-repeat; 
background-color:black; background-image:url("star.gif"); ) 


.no-bg { background-image:none; background-color:transparent; } 
.bg-color { background-image:none; background-color:black; } 
.bg-image { background-repeat:no-repeat; } 

.bg-repeat { background-repeat:repeat; } 

.bg-rx { background-repeat:repeat-x; } 

.bg-pos-lt { background-position:center bottom; } 

.bg-pos-rb { background-position:right bottom; } 

.bg-ry { background-repeat:repeat-y; background-position:center top; 
padding-left:22px; float:right; height:263px; margin: 0px; 
position:relative; top:-170px; } 


* * X * X X X X* 


CHAPTER 6 ™ BOX MODEL PROPERTIES 


Background 


Problem 


Solution 


Pattern 


Location 


Tips 


Example 


Related to 


See also 


You want to put a background color or image behind an element. 
Apply styles as follows: 


- Use background-color to set the background color of an element. 

- Use background-color:transparent for a transparent background color. 

- Use background-image:none to show no background image. 

- Use background-image:url("file.jpg") to display an image behind the 
contents of an element. The image fills the padding area of the element. 

- Use background-repeat:repeat to tile a background image across and down to 
fill the entire padding area. This is the default value. 

- Use background-repeat:repeat-x to tile the image across one row. 

- Use background-repeat: repeat-y to tile the image down one column. 

- Use background-repeat:no-repeat not to tile the image. 

- Use background-position to set the horizontal and vertical starting location of 
the image. This applies whether or not the image is tiled. 

- Use background-attachment: scroll to scroll a background image when the user 
scrolls the content. This is the default value. 

- Use background-attachment: fixed to prevent the image from scrolling. 





The background property is a composite of all these properties. The property 
values can be presented in any order. Each property value is separated by a 
space. background:none transparent repeat left top scroll; is the default. 


SELECTOR { background-color: COLOR; 
background-image: url("file.jpg"); 
background-repeat: CONSTANT; 
background-position: HORIZONTAL VERTICAL; 
background-attachment: SCROLL FIXED; j 


This design pattern applies to all elements. 


background-position requires two values: the first for the horizontal position and 
the second for vertical. Percentages position an image at a percentage of an 
element's width and height. Pixels position it at an offset. Ems position it 
proportional to the element's font-size. 


Whenever you assign a background-image to an element, you should also assign a 
background-color and a contrasting color. This provides a fallback in case the 
image does not load, and it ensures text does not become invisible or hard to see, 
such as white text on a white background. 


I assigned all the spans in the example to display a transparent GIF of a star on a 
black background starting at the left bottom of each span. Specific spans 
override these settings to demonstrate various background settings. 


Box Model (Chapter 4); Stacking Context, Atomic (Chapter 7); Font, Highlight, 
Text Decoration, Text Replacement, Invisible Text (Chapter 10); Inline 
Decoration, Inline Horizontal Rule (Chapter 11); Background Bulleted, 
Horizontal Rule (Chapter 13); Fade-out, Semi-transparent, Replaced Text, 
Content-over Background Image, CSS Sprite, Shadowed Image, Rounded 
Corners (Chapter 14); Striped Tables, Table Selectors (Chapter 15); Undersized 
Columns (Chapter 16); Padded Graphic Dropcap, Floating Graphic Dropcap, 
Marginal Graphic Dropcap (Chapter 18); Block Quote, Inline Block Quote 
(Chapter 19); Graphical Alert (Chapter 20) 
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Overflow 


© Overflow - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


overflow:visible overflow: hidden 


OVERFL( 


The text in this span does not wrap! The text in this span doe: 
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| selectme selectme 
selectme selectme 





overflow:scroll overflow: auto 


OVERFL’ LUV 


is span does not wrap! 
The text in this span dı p p 








r 
| selectme 
selectme 


Vertical Overflow. 
< | 











HTML 


<div id="ex1"> 
«h1»«code»overflow:visible«/code»«/hi1» 
«p class-"exi" > 
«span class-"big"»OVERFLOW«/span» «br /» 
«span class="nowrap">The text in this span does not wrap!</span> 
«select size="2"> 
«option»select me</option> 
«option selected-"selected"»select me«/option» 
</select><br /» 
«span»Vertical Overflow.«/span» 
</p> 
</div> 


CSS 


*.ex1 ( overflow:visible; } 
*.ex2 { overflow:hidden; } 
*.ex3 { overflow:scroll; } 
*.ex4 { overflow:auto; } 


/* Nonessential rules are not shown. */ 


Overflow 


Problem 


Solution 


Pattern 


Location 


Exceptions 


Tips 


Example 


Related to 


See also 


CHAPTER 6 ™ BOX MODEL PROPERTIES 


You want to control how a block handles the situation when its content overflows 
its bounds horizontally and vertically. 


CSS provides the overflow property to control how overflowing content is 
handled. You can set overflow to one of four constant values: visible, hidden, 
scroll, or auto. The default value is visible. visible allows overflowing content 
to be rendered outside the containing block. hidden hides the overflowing 
content and does not provide scrollbars. This prevents a user from scrolling 
overflowed content into view. scroll clips the overflowing content and provides 
scrollbars so the user can scroll the overflowed content into view. auto works like 
scroll except that it shows scrollbars only as needed. 


SIZED BLOCK SELECTOR { overflow:visible; } 
SIZED BLOCK SELECTOR ( overflow:hidden; } 
SIZED BLOCK SELECTOR ( overflow:scroll; j 
SIZED BLOCK SELECTOR ( overflow:auto; ) 


This design pattern applies to sized block elements that have width and/or 
height set to a measurement or percentage. 


Internet Explorer 6 implements overflow:visible incorrectly. Instead of allowing 
content to overflow the block, it expands the width and/or height of the block to 
accommodate the content. Internet Explorer 7 fixes this flaw. 


Itis usually best to avoid using overflow:hidden, overflow:scroll, or 
overflow:auto because users get frustrated when you truncate content 
or require them to scroll. 


This property is only needed when you size a block smaller than its content. 
If you use shrinkwrapped and stretched blocks, you do not need to use this 
property, and your layouts will dynamically expand as needed to display their 
content. 


CSS 3 defines two properties, overflow-x and overflow-y, that can be used in 
place of overflow. They separately direct how horizontal and vertical overflow 
should be handled. All major browsers support them except for Opera 9. For 
example, you can always display one scrollbar, and let the other scrollbar 
appear as needed using overflow-x:scroll and overflow-y:auto. You could 
also hide overflow in one dimension and scroll overflow in the other using 
overflow-x:hidden and overflow-y: scroll. 


To fit the example on one page, I had to omit some code. The example shows 
enough HTML to create one of the overflow divisions, and it contains the four 
CSS overflow rules. 


Box Model, Inline Box, Table Box (Chapter 4); Width, Height, Stretched 
(Chapter 5); Atomic (Chapter 6); Screenreader Only (Chapter 10); Nowrap 
(Chapter 11); Replaced Text (Chapter 14); Sized Columns, Undersized Columns 
(Chapter 16); Tabs (Chapter 17) 
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118 CHAPTER 6 | BOX MODEL PROPERTIES 
Visibility 


©) visibility - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Visibility 


There is hidden content here: You can't see it, 
because it is styled with visibility:hidden, but you can see where it 
would have been rendered. 


There is visible content here: CAN YOU SEE ME Now?| You can see it, 


because it is styled with visibility:visible. 
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HTML 


<hi>Visibility</h1> 


<p>There is hidden content here: <span class="hidden">CAN YOU SEE ME NOW?</span> 
You can't see it, because it is styled with <code>visibility:hidden</code>, 
but you can see where it would have been rendered. </p> 


<p>There is visible content here: <span class="visible">CAN YOU SEE ME NOW?</span> 
You can see it, because it is styled with <code>visibility:visible</code>. </p> 


CSS 


span ( padding:4px; background-color:white; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:ipx solid gray; border-bottom:2px solid black; ] 
p i background-color:gold; padding:10px; line-height:1.5em; } 


*.hidden ( visibility:hidden; ) 
*.visible ( visibility:visible; ) 


span:hover ( visibility:hidden; ) 


Visibility 
Problem 


Solution 


Pattern 


Location 


Tips 


Related to 


See also 


CHAPTER 6 ™ BOX MODEL PROPERTIES 


You want to hide an element and leave a blank spot where the element would 
have been rendered. 


CSS provides the visibility property for hiding an element without affecting 
the position of other elements in the inline flow, block flow, or float flow. 
Contrast this with display:none, which does not render an element by 
completely removing it from all flows—as if it never existed. Since absolute 
elements are already removed from all flows, there is no functional difference 
in applying visibility:hidden and display:none to absolute elements. 


Apply styles to your chosen class or ID as follows: 
- Use visibility:hidden to hide an element without removing it. 
- Use visibility:visible to show an element. This is the default. 


CSS 
SELECTOR { visibility:hidden; } 
SELECTOR { visibility:visible; } 


This design pattern applies to all elements. visibility is inherited by all 
elements. 


The main advantage of visibility:hidden is that you can hide content using 
JavaScript without forcing the browser to reflow the whole page. This could be 
useful when you want to hide selected content while the user drags and drops it 
to a new location. 


A document management system could mark text for removal and let the user 
toggle the display of such text between visibility:visible, visibility:hidden, 
display:none, and text-decoration:line-through. This would toggle through 
showing the text, hiding it, removing it, and running a line through it. 


You can create an unpleasant flickering effect when a user mouses over an 
element by selecting an element using the hover pseudo class and styling it 
with visibility:hidden as shown in the example. 


display:none is more commonly used than visibility:hidden because it not 
only hides an element—it completely removes it from the flow. 


Page Break; Box Model, Display (Chapter 4); Row and Column Groups, Hidden 
and Removed Cells, Removed and Hidden Rows and Columns (Chapter 15); 
Popup Alert (Chapter 20) 
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CHAPTER 6 | BOX MODEL PROPERTIES 


Page Break 


) Page Break - Mozilla Firefox DAR) 
Ele Edit View Go Bookmarks Tools Help S 





Page Break 


Page break after this element. 
Page break after this element. 
Page break before this element. 





HTML 


«div class-"page-break-after"»Page break after this element. «/div» 
«div class-"page-break-after"»Page break after this element. «/div» 
«div class-"page-break-before"»Page break before this element.«/div» 


CSS 


*.page-break-before ( page-break-before:always; } 
*.page-break-after { page-break-after:always; } 


Print Preview 


@ Print Preview 


























CHAPTER 6 ™ BOX MODEL PROPERTIES 


Page Break 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 


See also 


You want to insert a page break in the document for printing purposes. 


CSS provides two properties for inserting page breaks: page-break-before and 
page-break-after. You can insert a page break before an element by using 
page-break-before:always.You can insert a page break after an element by 
using page-break-after:always. 


The default values are page-break-before:auto and page-break-after:auto. 
These default values direct the browser to use its default algorithm to 
automatically determine the location of page breaks. You can override a 
previously set page break using page-break-before:auto and page-break- 
after:auto. 


SELECTOR { page-break-before:always; } 


Or 
SELECTOR { page-break-after:always; } 
or 
SELECTOR { page-break-before:auto; } 
or 





SELECTOR { page-break-after:auto; } 
This design pattern applies to all elements. 


Internet Explorer 6 and Opera 9 always insert a page break whenever they 
encounter an element set to page-break-before:always or page-break-after: 
always. This inserts an extra blank page whenever one element is set to 
page-break-after:always and the next element is set to page-break-before: 
always. The example demonstrates this “feature.” The example shows a 
screenshot of print preview in Internet Explorer 6 containing four printed pages. 
The third printed page is blank. Firefox 2 does not insert this extra blank page. 
An easy way to avoid inserting blank pages is not to use both page-break-after 
and page-break-before in the same document. 


If you want to print a blank page, insert an element into the document and style 
it with page-break-before and visibility: hidden. 


CSS provides other values for these properties and other page break properties, 
but only page-break-before: always and page-break-after:always work reliably 
in the major browsers. 
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CHAPTER 7 


Positioning Models 


This is the first of three chapters on positioning. This chapter presents the CSS positioning 
models. Chapter 8 shows how to indent, offset, and align elements. Chapter 9 combines these 
techniques to create advanced positioning design patterns. 


Chapter Outline 


* Positioning Models introduces and demonstrates the six positioning models. 


* Positioned explains, demonstrates, and contrasts the four values of the position 
property: static, absolute, fixed, and relative. 


* Closest Positioned Ancestor shows how absolute boxes can be positioned relative to 
any ancestor element rather than just the element's parent. 


* Stacking Context shows how positioned boxes can be stacked behind or in front of 
static elements and each other. 


* Atomic explains how to render inline content in a block rather than on a block. 
* Static explains the basics of normal flow. 


* Absolute shows how to remove any element from the normal flow and position it 
absolutely with respect to the inside of the border of its closest positioned ancestor. 


* Fixed shows how to remove any element from the normal flow and position it 
absolutely with respect to the viewport. 


* Relative shows how to use relative positioning to control stacking order, or offset an 
element without affecting its shape or the position of other elements. 


* Float and Clear shows how you can remove an element from the normal flow and float 
it to the left or right side of its parent. It also shows how to clear elements so that they 
are positioned below floats on the left, right, or both sides. 


* Relative Float shows how you can relatively position a float. 
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Positioning Models 


© Positioning Models - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Positioning Models 





Before 





Static Absolute Fixed Relative Float Relative Float 








Absolute 
Relative 


Static 





Relative Float 
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HTML 


«hi»Positioning Models</h1> 
<div class="section"><h2>Before</h2> 
<p><span>Static</span><span>Absolute</span> 
<span>Fixed</span><span>Relative</span> 
«span»Float«/span»«span»Relative Float</span></p></div> 


<div class="section"><h2>After</h2> 
<p class="static centered" > 
<span class="static centered">Static</span> 
<span class="absolute">Absolute</span> 
<span class="fixed">Fixed</span> 
<span class="relative">Relative</span> 
<span class="float">Float</span> 
<span class="relative float">Relative Float</span></p></div> 


CSS 

*.centered ( width:380px; margin-left:auto; margin-right:auto; ] 
*.static { position:static; } 

*.absolute ( position:absolute; top:20px; left:215px; } 

*.fixed ( position:fixed; bottom:20px; right:5px; } 

*.relative ( position:relative; top:20px; left:30px; j 

* 


.float ( float:right; } 


CHAPTER 7 ™ POSITIONING MODELS 


Positioning Models 


Introduction 


Related to 
See also 


This is not a design pattern, but an introduction to positioning. 


CSS provides six positioning models for positioning an element: static, absolute, 
fixed, relative, float, and relative float. The six positioning models are related to 
the six box models, but they are not the same. The static positioning model can 
position inline, inline-block, block, and table boxes. The absolute and fixed 
positioning models can position absolute boxes, which can be any type of 
element. The float positioning model can position float boxes, which can be any 
type of element. The relative positioning model can relatively position any type 
of box except for absolute boxes. The relative-float positioning model can 
relatively position float boxes. 


Each positioning model controls positioning using the same basic properties of 
display, width, height, and margin. Even though these properties are the same, 
their values have different functions in each model. For example, width:auto 
stretches a static block, whereas width:auto shrinkwraps an absolute element. 
You can see this in the example where the first paragraph is stretched and the 
absolute span is shrinkwrapped. 


Positioning models also use additional properties in ways that are unique to the 
model. Absolute and fixed positioning use left, right, top, bottom, and z- index 
to control the alignment of the absolute box. Relative positioning uses left, top, 
and z-index to control the offset of the box. Float positioning uses float and 
clear. 


Because these models use the same basic properties, different positioning 
layouts are triggered using unique combinations of element type, display box, 
and property values. Each design pattern exposes the exact combination of rules 
and elements that triggers each type of layout. For example, setting width to a 
value, margin-left to auto, and margin-right to auto centers a static block, but it 
does not center a static inline. For example, to center an absolute element, you 
must also set left and right to 0. 


There are over 50 combinations of design patterns that produce unique layouts. 
These patterns are presented in these three chapters on positioning (Chapters 7 
through 9). These patterns are easy to learn because they are combinations of 
box models, extents, margins, and positioning. In other words, the six box 
models (inline, inline-block, block, table, absolute, and float) can be combined 
with the three extents (sized, shrinkwrapped, and stretched) and the three types 
of margins (indented, offset, and aligned). In addition, any type of box except 
absolute can be relatively positioned. 


Box models, extents, and margins are discussed in Chapters 4 through 6. The 
positioning models are discussed in this chapter. Indents, offsets, and alignment 
are discussed in Chapter 8. Chapter 9 systematically combines the design 
patterns in these chapters to create over 50 unique layouts. 


Positioned, Static, Absolute, Fixed, Relative, Float and Clear, Relative Float 
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Positioned 


© Positioned - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Positioned | 
| Absolutely Positioned 














Static Positioned | 


This text contains a relatively positioned span that is from its 
normal position. offset 











wn 
mm Fixed 9x 
E: Positioned 
[45] 
zZ 
P 
i=) 
= 
E HTML 
<h1>Positioned</h1> 


«div class-"relative" id="canvas"> 

«p class="static">Static Positioned</p> 

<p class="static">This text contains a relatively positioned span that is 

<span class="relative offset">offset</span> from its normal position.</p> 

«em class="absolute">Absolutely Positioned</em> 

<img class-"fixedi" src-"star.gif" alt="star" /> 

«p class="fixed2">Fixed Positioned</p> 

</div> 





CSS 


div,p,em ( margin:10px; padding:10px; background-color:white; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:1px solid gray; border-bottom:2px solid black; } 


.static { position:static; } 

.relative { position:relative; left:auto; top:auto; bottom:auto; right:auto; } 
.absolute { position:absolute; left:35%; top:-40px; } 

.fixedi { position:fixed; z-index:20; right:5px; bottom:35px; } 

.fixed2 { position:fixed; z-index:10; right:Opx; bottom:0; 

width:100px; margin:0; } 


* + x* * X 


*.offset { bottom:-15px; left:-20px; } 
#canvas { background-color:gold; } 


/* Nonessential rules are not shown. */ 


CHAPTER 7 ™ POSITIONING MODELS 


Positioned 


Problem 


Solution 


Pattern 


Location 
Limitations 


Example 


Related to 
See also 


You want to turn an element into a positioned element so that its descendants 
can be positioned relative to it. You may also want to offset the element from its 
current location, its nearest positioned ancestor, or the viewport; move the 
element into its own layer; remove the element from the flow; or change the 
stacking order of the element to control when it overlaps other elements or is 
overlapped. 


You can use position:static to "unposition" an element so that it is rendered 
normally in the flow. static is the default value for position.You can use 
position:relative to position an element at an offset from its location in the 
normal flow. You can use position:absolute to position an element at an offset 
from its location in the normal flow or from its nearest positioned ancestor. You 
can use position: fixed to position an element at an offset from the viewport. 


You can use left to offset the left side of an element from the left side of its 
reference position. Positive values offset to the right and negative to the left. 
You can use right to offset the right side of an element from the right side of its 
reference position. Positive values offset to the left and negative to the right. 
You can use top to offset the top of an element from the top of its reference 
position. Positive values offset down and negative offset up. You can use bottom 
to offset the bottom of an element from the bottom of its reference position. 
Positive values offset up and negative offset down. You can use z- index to 
position an element in a specific layer of the stacking order. Larger numbers 
bring the item closer to the front. You can use margin to offset elements from 
their position. 


SELECTOR { position:ABSOLUTE FIXED RELATIVE; 
z-index:+VALUE; 
left:xVALUE; right:+VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
top:+VALUE; bottom:+VALUE; 
margin-top:+VALUE; margin-bottom:+VALUE; } 


This design pattern applies to all elements. 
Fixed position does not work in Internet Explorer 6. 


I assigned position:relative to the division to make it "positioned." 

An element is "positioned" when it has been assigned to position:relative, 
position:absolute, or position: fixed. Floats can be "positioned" using 
position:relative. Being "positioned" makes an element the reference point 
to which its closest absolutely positioned descendants are positioned. 


The image of the star comes before the final paragraph in document order. This 
would normally cause the final paragraph to be render on top of the star, but I 
assigned a higher z-index to the image to place it on top. 


Closest Positioned Ancestor, Static, Absolute, Fixed, Relative, Float and Clear 


WWw.Ccssdesignpatterns.com/positioned 
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Closest Positioned Ancestor 


© Closest Positioned Ancestor - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Closest Positioned Ancestor 


Non-positioned Great-grandparent 


Positioned Grandparent 





[Non-positioned Parent 





Absolute #2 Bottom Right 


Nested Absolute 


4 
Lu 
A 
e 
E 
[2] 
= 
2 
e 
[= 
D 
(=) 
a 


Absolute #1 Bottom Right 


Nested Absolute 





HTML 


<body> 
<h1>Closest Positioned Ancestor</h1> 


<div class="static ggp">Non-positioned Great-grandparent 
<div class-"absolute sized bottom-right box1">Absolute #1 Bottom Right 
<em class="absolute offset box2">Nested Absolute</em></div> 
<div class="relative gp">Positioned Grandparent 
<div class="static parent">Non-positioned Parent 
<span class="absolute sized bottom-right box1">Absolute #2 Bottom Right 
<em class="absolute offset box2">Nested Absolute</em></span> 
</div></div></div> 
</body> 


CSS 


*.static { position:static; } 
* relative { position:relative; } 
* absolute { position:absolute; } 


* sized ( width:230px; height:70px; } 
* bottom-right ( bottom:0; right:0; } 
* offset { left:45px; top:30px; } 


/* Nonessential rules are not shown. */ 


CHAPTER 7 ™ POSITIONING MODELS 


Closest Positioned Ancestor 


Problem 


Solution 


Pattern 


Location 


Limitations 


Advantages 


Disadvantages 


Tip 


Related to 
See also 


You want to position an element so you can position other elements in 
relation to it. Such an element is the closest positioned ancestor to its 
descendants. 


You can position an element by assigning position:relative, 
position:absolute, or position: fixed to it. Positioned elements are 
positioned relative to their closest positioned ancestor. This allows you to 
remove elements from the normal flow and position them far away from 
their original position in the flow. Notice in the example how the absolute 
span (Absolute #2) is removed from its non-positioned parent and aligned 
to the bottom right of its positioned grandparent, which is its closest 
positioned ancestor. 


When a positioned element has no positioned ancestor, «body» is the 
positioned ancestor. In other words, «body» is positioned by default. Notice 
in the example how the absolute division (Absolute #1) is removed from its 
non-positioned parent and aligned to the bottom right of «body». 


The main purpose for aligning positioned elements to their closest positioned 
ancestors is to create self-contained layouts. You can reposition a self- 
contained layout and all its descendants will move along with it—both 
positioned and non-positioned. Notice in the example how the absolute «em» 
elements are positioned relative to their closest positioned ancestors, as these 
ancestors are moved to the bottom right of their closest positioned ancestors. 


SELECTOR ( position:relative; ] 
or 

SELECTOR { position:absolute; } 
or 

SELECTOR { position: fixed; } 


This pattern applies to all elements. 


A closest positioned ancestor has to be an actual ancestor. CSS does not 
provide a way to position elements relative to any element in a document. 
That would be a very welcome feature, but as it is, you must choose an 
ancestor to be the reference for positioned elements. 


There is no limit on how deep you can nest self-contained positioned layouts. 
This is a very powerful feature for creating reusable layouts. 


Positioning is very powerful, but its biggest weakness is that it ultimately 
requires elements to be sized, and sized layouts do not scale well on devices 
with displays or fonts that are smaller or larger than designed for. 


position: relative is a great way to create a positioned ancestor because it 
does not remove it from the normal flow. This allows you to create layouts 
that combine normal flow and absolute position. 


Positioned, Stacking Context, Atomic, Absolute, Fixed, Relative, Relative Float 


www. cssdesignpatterns.com/closest-positioned-ancestor 
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Stacking Context 


*4 Stacking Context - Opera 


File Edit View Bookmarks Widgets Tools Help 


Stacking Context 


2. Absolute pinnae oan 
3. Static Block ——— 


xd ids dt. 4.StaticFloat | |> Static al ss] 
Stacking 6. Relative Span z-index:0 EE 
Context #1 7. Absolute z-index:999 

z-index:2 pan z-index:0 


Context #2 7. Absolute z-index:999 
z-index:1 
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HTML 





«hi»Stacking Context</h1> 
<div class="stacking-context1 box"> 
«div class="caption">1. Background and Borders of Stacking Context #1 
<br /><code>z-index:2</code></div> 
<span class="level2 box">2. Absolute <code>z- index: -999</code></span> 
<div class="level3 box">3. Static Block<br /> 
<span class="level4 box">4. Static Float</span> 
<span class="level5 box">5. Static Span</span><br /»«br /><p class-"clear"»«/p» 
<span class-"level6 box">6. Relative Span <code>z-index:0</code></span> 
<span class="level7 box">7. Absolute <code>z-index:999</code></span> 
</div> 
</div> 
<div class="stacking-context2 box"><!-- ...Same exact code as previous... --></div> 


CSS 


*.stacking-contexti { z-index:2; position:absolute; left:10px; top:70px; } 
*.stacking-context2 ( z-index:1; position:absolute; left:223px; top:120px; } 


.level2 { z-index:-999; position:absolute; } 
.level3 { position:static; } 

.level4 { float:left; } 

.level5 { position:static; } 

.level6 { z-index:0; position:relative; } 
.level7 { z-index:999; position:absolute; } 


+ + + * X X 


/* Nonessential rules are not shown. */ 
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Stacking Context 


Aliases 
Problem 


Solution 


Pattern 
Location 


Limitations 
Example 


Related to 
See also 


Stacking Order, Stacking Level, Z-index, Layering, Painting Order 
You want to control how positioned elements are stacked from front to back. 


CSS provides z-order to control the stacking of elements. Static elements are 
stacked from back to front in document order. Positioned elements are stacked 
from back to front from smallest to largest z-index with document order 
breaking ties. Positioned elements with a negative z-index are placed behind 
static elements and non-positioned floats. z-index values do not have to be 
contiguous. The default value for z-index is auto. 


A positioned element with a numeric z-index creates a local, self-contained, 
stacking context, in which all its descendants are rendered—static, float, and 
positioned. A stacking context is not created when z-index is set to auto or when 
z-indexis assigned to a non-positioned element. The following values create 
stacking contexts: z- index:0, z- index: -1, and z- index:9999. 


Each stacking context is atomic and does not allow ancestors or siblings to be 
layered in between its children. Each local stacking context is assigned to an 
internal stacking level of 0, and its descendants are stacked relative to it. This is 
an important point. z-index is not global. It is relative to the closest positioned 
ancestor that has been assigned to a numeric z- index. The root element, «html», 
creates the root stacking context. 


A stacking context is rendered in layers from back to front as follows: 

1. Background color, image, and borders of the stacking context element 
2. Descendant positioned elements with a negative z-index 

3. Descendant non-positioned block elements 

4. Descendant non-positioned floats 

5. Descendant non-positioned inline elements 

6. Descendant positioned elements with z-index: auto and z-index:0 

7. Descendant positioned elements with a positive z-index 


Steps 2, 6, and 7 each recursively render stacking contexts because each 
positioned element with a numeric z-index creates a local stacking context. 


Before a browser renders an element's content, it renders its box starting with its 
background color, then its background image, and then its borders. A browser 
then renders a box’s contents on top of the box. 


SELECTOR { z-index:+VALUE; position:ABSOLUTE_FIXED_RELATIVE; } 
This pattern applies to all elements. 


Firefox 2 incorrectly switches steps 1 and 2, which puts negative child stacking 
contexts behind the background and borders of the parent context! 


The example shows all seven stacking levels repeated in two stacking contexts. 
Notice how stacking levels are relative to each stacking context. 


Positioned, Closest Positioned Ancestor, Absolute, Relative, Relative Float 


www. cssdesignpatterns.com/stacking-context 
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Atomic 


©) Atomic - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Atomic 


Layered 
| TEA E Sioa 
i ock 











Static Overlapping Bl 
Overlapping Table 























Absolute Overlapping Block 





HTML 


<h1>Atomic</h1> 
<div>Layered 
«p class="static">Static Overlapping Block</p> 
«p class="static overlap">Static Overlapping Block«/p» 
<table class="static overlap"><tr><td>Overlapping Table</td></tr></table></div> 


<div>Atomic 
<p class="relative">Relative Overlapping Block</p> 
<p class="fixed">Fixed Overlapping Block</p> 
<p class="absolute">Absolute Overlapping Block</p></div> 


CSS 


*.static { position:static; } 
*.overlap { margin-top:-22px; } 


* relative { position:relative; } 
*. fixed { position:fixed; margin-top:-16px; } 
* absolute { position:absolute; top:65px; } 


/* Nonessential rules are not shown. */ 


Atomic 


Aliases 


Problem 


Solution 


Pattern 
Location 


Limitations 


Tip 


Related to 
See also 


CHAPTER 7 ™ POSITIONING MODELS 


hasLayout, Grouped 


You want content to be rendered in a block, not on it. In other words, you want 
text and inline content to be rendered atomically with its block so that when the 
block is overlapped by another block, its content is overlapped too. 


The problem is that a browser renders static inline content in a separate layer 
above the backgrounds of static blocks. When static blocks overlap each other, 
their backgrounds overlap, but their inline content does not! Notice in the 
example how the borders and backgrounds of the blocks in the first division 
overlap, but their text does not. All the major browsers work this way because a 
stacking context renders all block backgrounds and borders first, then all floats, 
and then all inline elements and content. This places the backgrounds and 
borders of blocks in a layer below floats and inline content. 


This may seem unusual because we tend to think of inline content as being in 
the blocks that contain them, not on them. But it makes sense that inline 
elements are rendered ori blocks because inline content overflows by default. 


A positioned element is atomic, which means no external elements can be 
layered in between its static descendants, its inline content, and its background. 
Notice in the second division of the example how neighboring blocks overlap 
each other, including their inline text. This is because they are positioned, and 
the stacking context requires positioned elements to be rendered atomically. 
You can use relative, absolute, and fixed positioning to make an element atomic. 
Blocks set to overflow:scroll are also atomic because their content is literally 
contained in the block's scrollable area. 


SELECTOR { position:RELATIVE ABSOLUTE FIXED; } 
This pattern applies to all elements. 


overflow does not consistently create atomicity in the major browsers. Blocks set 
to overflow:hidden are atomic in Firefox 2.0 and Internet Explorer 7, but not in 
Internet Explorer 6 and not in other major browsers. Blocks set to 
overflow:scrollare atomic except for in Internet Explorer 6. 


All tables and sized blocks are atomic in Internet Explorer 7, but not in other 
major browsers. This is because Internet Explorer 7 and earlier versions use an 
internal feature and a proprietary DOM property called hasLayout, which is true 
when an element has layout. When an element has layout, it is rendered in its 
own window with its own layout context. All of its children are rendered 
atomically inside its rectangular box. It cannot shrinkwrap, and external floats 
do not affect the position of its inline content. 


Internet Explorer 6 has bugs that are sometimes fixed by triggering hasLayout. 
You can use its proprietary property zoom: 1 to trigger layout, but be aware that 
zoom causes your stylesheet not to validate. 


Positioned, Static, Absolute, Fixed, Relative, Float and Clear 


www. cssdesignpatterns.com/atomic 
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Static 


© Static - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Static 


Positioned Grandparent 





Non-positioned Parent 


Sized Static 
Block 


Stretched Static Block 


Shrinkwrapped Static Inline Shrinkwrapped Static Inline 
Shrinkwrapped Static Inline Shrinkwrapped Static Inline 
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HTML 


<h1>Static</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<div id="zs" class="box">Sized Static Block </div> 
<div id="ss" class="box">Stretched Static Block</div> 
<div class="box"> <span>Shrinkwrapped Static Inline</span> 
<span>Shrinkwrapped Static Inline</span> 
<span>Shrinkwrapped Static Inline</span> 
<span>Shrinkwrapped Static Inline</span> 
</div></div></div> 


CSS 


span { position:static; margin:40px; line-height: 32px; 
padding:3px; border:2px solid black; background-color:yellow; } 


#zs { position:static; width:120px; height:100px; margin:10px auto; } 


#ss { position:static; width:auto; height:auto; margin:10px 50px; } 
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Static 


Problem You want elements to flow automatically one after the other in lines and blocks 
so they fluidly adapt to the size of the user's display. 


Solution You can apply position:static to an element to position an element in the 
normal flow. Since this is the default, elements are automatically rendered in 
the normal flow. The normal flow consists of nested blocks rendered vertically 
down the viewport. Inside a block, one or more blocks or lines are rendered 
vertically down the block. Inside a line, text and objects are rendered horizontally 
across the line. The starting position of a static element is determined by the 
previous static element. The size, padding, borders, and margins of a static 
element determine the starting position of the next element. 


Patterns Inline Static Element 
INLINE-SELECTOR { position:static; line-height:+VALUE; 
margin-left:+VALUE; margin-right:+VALUE; j 


Block Static Element 

BLOCK-SELECTOR { position:static; width:+VALUE; height:+VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
margin-top:+VALUE; margin-bottom:+VALUE; } 
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Location This pattern applies to all elements. 


Example All elements in the example are static. Block elements are rendered in blocks that 
flow down from the top. Each block, except for the sized block, is automatically 
stretched to the width of its container minus its left and right margins and the 
parent’s padding. 





The top margin pushes the selected static block element down, and the bottom 
margin pushes down the following static block element. Adjacent vertical 
margins collapse into each other. The resulting margin is the larger of the two 
adjacent margins. In the example, each block has a top and bottom margin of 
10 pixels. These margins collapse so that only a 10-pixel margin exists between 
them. 


You can assign height and width to a static block to create a sized block. Left 
and/or right margins assigned to auto expand to compensate for the specified 
width. You can center a sized static block element by setting both left and right 
margins to auto, as shown in the first block in the example. 


The static inline elements in the example have left and right margins of 40 pixels. 
Left and right margins push inline elements apart, and they do not collapse. 
When the content of an inline element exceeds the width of its container, a 
browser wraps it into a new line. Top and bottom margins are ignored on inline 
elements because line-height directs the height of lines. 


Related to Absolute, Fixed, Relative; Sized, Stretched, Shrinkwrapped (Chapter 5) 


See also www. cssdesignpatterns.com/static 
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Absolute 


© Absolute - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Absolute 


Positioned Grandparent Stretched Absolute 





Non-positioned Parent 
Absolute elements are positioned in their own layer in front bf or behind the 


normal flow. 
In-place Absolute ese Anika 


Shrinkwrapped Absolute 





HTML 


«hi»Absolute«/h1» 
«div class="gp"><h2>Positioned Grandparent«/h2» 
«div class="parent"><h2>Non-positioned Parent</h2> 
Absolute elements are positioned in their own layer in front of or behind the 
normal flow. 
«span id="in-place" class="box">In-place Absolute</span> 
<span id="sized" class="box">Sized Absolute</span> 
<p id="stretched" class="box">Stretched Absolute</p> 
<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p></div></div> 


CSS 


#in-place { position:absolute; z-index:1; } 


#shrinkwrapped { position:absolute; z-index:0; 
width:auto; left:0; bottom:0; margin:0; } 


#sized { position:absolute; z-index:auto; 
width:170px; height:115px; bottom:0; left:270px; margin:0; } 


#stretched { position:absolute; z-index: -1; 
height:auto; right:0; top:0; bottom:0; margin:0; } 


/* Nonessential rules are not shown. */ 


Absolute 


Problem 


Solution 


Patterns 


Location 


Limitations 


Advantages 


Disadvantages 
Related to 


See also 


CHAPTER 7 ™ POSITIONING MODELS 


You want to remove an element from the normal flow and move it into its 
own layer. You also want to position it relative to the inner border of its closest 
positioned ancestor, or you want it to be positioned at the same position it 
would have had in the normal flow. You do not want its position to have any 
effect on the position of other elements. 


You can use position:absolute to render any element as an absolute box. You 
can use width and height to size it. Percentages refer to its closest positioned 
ancestor rather than its parent. You can assign a value, such as 0, to left, 
right, top, and bottom to align it to the sides of its closest position ancestor. 
Or you can assign auto to left, right, top, and bottom to render it at the same 
position it would have had in the normal flow. You can use margin-left, 
margin-right, margin-top, and margin-bottom to offset its sides from the sides 
of its closest positioned ancestor. You can use z-index to control the stacking 
order of the element. Elements with a larger z- index are rendered in a layer 
closer to the user. You can assign position: relative, position: absolute, or 
position: fixed to an ancestor element to make it positioned. If you do not 
have any positioned ancestors, a browser will use <body> as the closest 
positioned ancestor. 


SELECTOR { position:absolute; z-index:VALUE; 
width:+VALUE; left:+VALUE; margin-left:+VALUE; 
vight:+VALUE; margin-right:+VALUE; 
height:+VALUE; top:+VALUE; margin-top:+VALUE; 
bottom:+VALUE; margin-bottom:+VALUE; } 

plus 

ANCESTOR-SELECTOR { position:relative; } 
or ANCESTOR-SELECTOR { position:absolute; } 
or ANCESTOR-SELECTOR { position: fixed; } 


You can absolutely position any type of element. 


Internet Explorer 6 shrinkwraps stretched absolute elements. Internet 
Explorer 7 and earlier versions cannot center absolute elements. 


Absolute elements give you precise control over their placement in relation 
to their closest positioned ancestor. Absolute elements can be sized, 
shrinkwrapped, and stretched. An absolute element is rendered in a layer 
above the normal flow as an absolute box, which is much like a block box. 
Unlike floats, absolutes do not flow. Their position is unaffected by and does 
not affect the position of other elements and content. This may cause them to 
overlap or be overlapped. If all children are positioned absolutely, the parent 
collapses to a height of zero (unless you set the height to a value) because its 
children have been removed from the normal flow. 


Layouts created using absolute positioning do not scale well on devices with 
displays or fonts that are much smaller or larger than you designed for. 


Offset Absolute (Chapter 8); Fixed; Sized, Shrinkwrapped, Stretched 
(Chapter 5) 


www. cssdesignpatterns.com/absolute 
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Fixed 


© Fixed - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Non-positioned Parent Stretched Absolute 


Absolute elements are positioned in their own layer in front @f or behind the 
normal flow. 





In-place Absolute 


Sized Absolute 


Shrinkwrapped Absolute 
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HTML 





«hi»Fixed«/hi» 
«div class="gp"><h2>Positioned Grandparent«/h2» 
«div class="parent"><h2>Non-positioned Parent</h2> 
Absolute elements are positioned in their own layer in front of or behind the 
normal flow. 
«span id-"in-place" class="box">In-place Absolute</span> 
<span id="sized" class="box">Sized Absolute</span> 
<p id="stretched" class="box">Stretched Absolute</p> 
<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p></div></div> 


CSS 


*.gp { position:relative; z-index:1; } 
#in-place { position:fixed; z-index:1; } 


#shrinkwrapped { position:fixed; z-index:0; 
width:auto; left:0; bottom:0; margin:0; } 


#sized { position: fixed; z-index:auto; 
width:170px; height:115px; bottom:0; left:270px; margin:0; } 


#stretched { position:fixed; z-index:-1; 
height:auto; right:0; top:0; bottom:0; margin:0; } 


/* Nonessential rules are not shown. */ 
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Fixed 


Problem You want to move an element into its own layer and fix its position to the 
viewport, or you want it to be positioned at the same position it would have 
had in the normal flow. You also do not want the element to scroll when the 
viewport scrolls. This is called a fixed-position element or a fixed element. 


Solution You can use position:fixed to turn any element into a fixed-positioned 
element. Fixed works identically to Absolute except that an element is 
positioned relative to the viewport rather than its closest positioned ancestor, 
and the element does not scroll when the viewport scrolls. If you have 
positioned the fixed element at the same position it would have had in the 
normal flow, it still does not scroll when the viewport scrolls. 


Pattern SELECTOR ( position:fixed; z-index:VALUE; 


width:+VALUE; left:+VALUE; margin-left:+VALUE; 3 

vight:+VALUE; margin-right:+VALUE; 2 

height:+VALUE; top:+VALUE; margin-top:+VALUE; 2 

bottom:+VALUE; margin-bottom:VALUE; } S 

F4 

Location This pattern applies to all elements. = 
m 

Limitations Internet Explorer 6 renders fixed-position elements as absolute. Internet to 


Explorer 7 renders fixed elements properly. 


Advantages Fixed elements give you precise control over their placement in relation to 
the viewport. They do not scroll with the viewport. They are well suited for 
holding controls, such as menus, toolbars, buttons, etc. 





Disadvantages Layouts created using fixed positioning do not scale well on devices with 
displays or fonts that are much smaller than you designed for. 


Example This example contains the same positioned elements as the Absolute design 
pattern example. The only difference is the elements are fixed instead of 
absolute. Notice how the browser window is scrolled down in the example, 
and the position of the fixed elements remains the same. Notice how the fixed 
elements are positioned relative to the viewport instead of their grandparent, 
which is the closest positioned ancestor. Notice how the in-place absolute is 
initially positioned where it would have been in the normal flow, but remains 
fixed at that position and does not scroll when the viewport scrolls. If the in- 
place absolute is initially rendered offscreen, it will not be visible even when 
the viewport is scrolled. 


Notice how the fixed elements in the example are layered exactly the same as 
the absolute elements in the Absolute design pattern example. The in-place 
absolute is in front of the sized absolute because it has a z- index of 1 and the 
sized absolute has a z- index of auto. The stretched absolute is layered behind 
the positioned grandparent because it has a z- index of -1 and the positioned 
grandparent has a z- index of 1. Since the positioned grandparent has a 
transparent background, you can see the stretched absolute element 

behind it. 


Related to Absolute; Sized, Shrinkwrapped, Stretched (Chapter 5) 


See also www. cssdesignpatterns .com/fixed 
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Relative 


© Relative - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Relative 


Before Relative Positioning 


Static Block Static Inline on ti 
Static Block on top 


After Relative Positioning 


Absolute 











Absolute 
Relative Block Relative Inline on top 
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Relative Block on top 








HTML 


<h1>Relative</h1> 
<div class="relative">Before Relative Positioning 
<p class="static">Static Block 
<span class="static ontop">Static Inline on top</span></p> 
<p class="static ontop">Static Block on top</p> 
«p class-"absolute"»Absolute«/p»«/div» 


«div class-"relative"»After Relative Positioning 
«p class-"relative"»Relative Block 
«span class-"relative ontop offset"»Relative Inline on top«/span»«/p» 
«p class-"relative ontop">Relative Block on top«/p» 
«p class-"absolute"»Absolute«/p»«/div» 


CSS 


.ontop { z-index:1; } 

.static { position:static; } 

.relative ( position:relative; } 

.absolute { position:absolute; z-index:auto; } 
.offset { left:20px; top:auto; } 


+ * X X * 


/* Nonessential rules are not shown. */ 


Relative 


Problems 


Solutions 


Pattern 


Location 


Limitations 


Related to 


See also 
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You want to control the stacking order of a float or an element in the normal 
flow. The problem is that z-index does not apply to floats or static-positioned 
elements. Controlling the stacking order is important when you have positioned 
elements overlapping floats and static elements. 


You want to position an element so it can be a closest positioned ancestor. 


You want to offset an element without removing its place in the normal flow. You 
do not want to change the shape it has in the normal flow. And you do not want 
the offset to change the position of other elements. 


To control the stacking order of an element in the normal flow, you can position 
it relatively using position:relative.You can use z- index to set its stacking 
order in relation to other positioned elements. 


A relative element is positioned without leaving the normal flow, and without 
changing the shape that it has in the normal flow. For example, if an inline 
element is wrapped across one or more lines, it retains this unique layout when 
relatively positioned. Contrast this with absolute positioning, which changes an 
inline element into an absolute box and reflows the content into the absolute 
block box, which may change its layout. 


You can optionally offset a relatively positioned element from its position in the 
flow using left and top. This does not change the position of other elements in 
the flow. left and top default to auto, and auto keeps relatively positioned 
elements in their normal position in the normal flow. 


You can assign position:relative to any element so that absolute descendants 
can be positioned relative to it—for details see Closest Positioned Ancestor 

in this chapter. You can use position:relative, left, and top to offset any 
element—for details, see Offset Relative in Chapter 8. You can use position: 
relative to offset and control the stacking order of floats—for details, see 
Relative Float in this chapter. 


SELECTOR { position:relative; z-index:+VALUE; 
left:auto; top:auto; ] 


This pattern applies to all elements. 


Because of the way Internet Explorer 7 and earlier versions implement 
hasLayout, relative inline elements in a positioned block cannot be stacked on 
top of elements outside the block. Because of this, Internet Explorer 7 cannot 
render the relative inline span in the example in front of the absolute paragraph. 
This happens because the inline span is literally contained within the paragraph 
because the paragraph has layout. This problem does not occur in other major 
browsers, and it does not occur in Internet Explorer when the parent block does 
not have layout, such as when it is a static block. 


Positioned, Closest Positioned Ancestor, Stacking Context, Atomic, Relative 
Float; Offset Relative (Chapter 8) 


www. cssdesignpatterns.com/relative 
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Float and Clear 


© Float and Clear - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Float and Clear 














| Float Left This paragraph does not clear floats. Float Right 
This paragraph clears floats on its left | Float Right - Float Right - 
=e | NOT cleared cleared right 
Float Left - Float Left - z NI 
| daarca ton NOT cleared | Men paragraph clears floats on its right 
N 
mm Float Left Float Right | 
E: This paragraph clears floats on both sides. 
z 
= 
S 
E 
S 
a HTML 
<h1>Float</h1> 
<div> 





<div class="float left clear-left" >Float Left </div> 

<div class="float right clear-right">Float Right</div> 

«p class-"clear-none"»This paragraph does not clear floats. 
«span class-"float right clear-right">Float Right - cleared right</span> 
«span class-"float ight clear-none" >Float Right - NOT cleared</span></p> 


«p class-"clear-left"»This paragraph clears floats on its left side.«/p» 
«div class="float left clear-left">Float Left - cleared left</div> 
«div class="float left clear-none">Float Left - NOT cleared</div> 


«p class-"clear-right"»This paragraph clears floats on its right side. 
«span class="float left clear-left">Float Left </span> 
<span class="float right clear-right">Float Right</span></p> 


<p class="clear-both">This paragraph clears floats on both sides.</p> </div> 


CSS 


.float ( margin:Opx 10px; width:120px; background-color:yellow; color:black; } 
.left { float:left; } 

.right { float:right; } 

lear-left { clear:left; } 

lear-right { clear:right; } 

lear-both { clear:both; } 

lear-none { clear:none; } 


* + E X X X X 


O00 S| 





/* Nonessential rules are not shown. */ 
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Float and Clear 


Problem 


Solution 


Patterns 


Location 


Tips 


Example 


Related to 
See also 


You want to remove an element from the normal flow and display it on the left or 
right side of its parent. You want it rendered as a block aligned to the inside of its 
parent's padding. You also want its top to align with the line from which it was 
extracted. You also want to control when other floats and nonfloated content 
flows next to floats or is moved below them on one or both sides. 


You can use float:left or float:right to remove an element from the normal 
flow and place it on the left or right inner edge of its parent's padding area. You 
can use float:none to override another rule that floats an element. Floats exist 
in their own layer above the backgrounds of block elements and next to inline 
content in the normal flow. A left float indents content on its right side, and a 
right float indents content on its left. A float does not affect the position of block 
boxes—just their inline content. Floats affect the position of other floats and may 
be stacked next to each other on the left or right. Floats also may push down 
other floats and inline content. A float's vertical and horizontal margins offset 

it from its parent and from other floats. Floats do not overlap other floats or 
content (unless a float has a negative margin). 


You can use clear:left to move a block or float below any floats on its left side. 
You can use clear:right to move a block or float below any floats on its right 
side. You can use clear:both to move a block or float below floats on its right or 
left. 








SELECTOR ( float:none; j 
SELECTOR ( float:left; j 
SELECTOR { float:right; } 
SELECTOR ( clear:none; j 
SELECTOR ( clear:left; j 
SELECTOR { clear:right; } 
SELECTOR ( clear:both; j 


Any element can be floated. clear works on tables, blocks, and floats. clear has 
no effect on inline, absolutely positioned, or fixed-position elements. 


When you need to predict the vertical location of a float, it is best to float a block 
element. A browser places the top of a floated block exactly where it would have 
been rendered if it were not floated. A browser places the top of a floated inline 
element depending on where it would have been rendered in a line if it were not 
floated. If at the beginning of a line, its top is aligned to the top of the line; 
otherwise, its top is aligned to the bottom of the line. 


The example contains eight floats: four spans and four divisions. The four 
paragraphs demonstrate each setting of clear. When a float is not cleared on 
the side that it is floated, it stacks next to other floats on that side. When cleared 
on a side, a float or block element moves below floats on that side. 


Static, Absolute, Fixed 


www.cssdesignpatterns.com/float 
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Relative Float 


Relative Float - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Relative Float 





This text is next to a relative float. A 
Relative 5 relative float works just like a static 
Relative ur ; 
Float 1 Float 2 float except that it is relatively 
positioned. This allows it to be offset 
absolute| using left and right without affecting 
the position of other elements. It also 
allows z-index to control the stacking order of floats. 








4 
Lu 
A 
e 
E 
[2] 
= 
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e 
E 
D 
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HTML 


<h1>Relative Float</h1> 





<div class="parent"> 
«div class="relative1 float">Relative Float 1</div> 
<div class="relative2 float">Relative Float 2</div> 


<p>This text is next to a relative float. A relative float works just like a 
static float except that it is relatively positioned. This allows it to be 
offset using <code>left</code> and <code>right</code> without affecting 
the position of other elements. It also allows <code>z-index</code> to 


control the stacking order of floats. 


<span class="absolute">absolute</span></p></div> 


CSS 


*.parent { position:relative; padding:20px; } 


*.relative1 { position:relative; z-index:3; top:10px; left:10px; } 
*.relative2 ( position:relative; z-index:2; top:20px; left:-30px; ] 


*.float ( float:left; width:100px; height:50px; 
margin-right:25px; margin-bottom:40px; } 


* absolute { position:absolute; z-index:1; top:102px; left:215px; } 


/* Nonessential rules are not shown. */ 
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Relative Float 


Problem You want to offset a float from its current position without affecting the position 
of any other element, including other floats and inline content. You also want to 
control the stacking order of floats in relation to each other and in relation to 
positioned elements. 


Solution You can use position:relative to relatively position a float. A relative float 
remains in the normal flow of floats and can be offset from its position in the 
flow using left and top. A relative float is rendered in a positioned layer, which 
allows you to use z- index to control its stacking order in relation to floats and 
other positioned elements. Since a relative float is positioned, absolute 
descendants can be positioned relative to it. 


Pattern SELECTOR ( position:relative; 
left :+VALUE ; 
vight:+VALUE; 
z-index: +VALUE; 


float:LEFT RIGHT; 
width:+VALUE; 
height :+VALUE; 
margin:+VALUE; } 


Location This pattern applies to all elements. 
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Advantages This design pattern allows you to use margin to adjust the position of inline 
content in relation to the float. You can then use left and top to adjust the 
position of the float without changing the location of the inline content. This 
gives you great flexibility in positioning floats. 


Without this design pattern, you could not control the stacking order of floats 
and other positioned elements—other than controlling their order in the 
document. 


Tip Only position:relative and position: static are compatible with floats. If you 
assign position:absolute or position:fixed to a float, the results are undefined, 
and each browser handles the situation differently. For example, Firefox 2 sets 
float to none and renders the element as an absolute element, and Internet 
Explorer 7 partly floats and partly positions it. 


Example The example contains two relative floats, a static paragraph and an absolutely 
positioned span. Using left and top, I relatively offset each float from its floated 
position without affecting the location of the neighboring inline content in the 
paragraph. Using z-index, I stacked each float and the absolute element in 
reverse order in comparison to document order. 


Related to Positioned, Static, Absolute, Fixed, Relative, Float and Clear 


See also www.cssdesignpatterns.com/relative-float 


CHAPTER 8 


Positioning: Indented, Offset, 
and Aligned 


This chapter shows how margins can offset and align elements. 

A stretched element is indented or outdented when one or more of its sides is displaced 
into or out of its container, changing the width or height of an element. 

A sized or shrinkwrapped element is offset when the entire element is shifted from its 
normal position without changing the height or width of an element. 

A sized or shrinkwrapped element is aligned when it is relocated to one of the sides of its 
container without changing its size and optionally offset from that side. 


Chapter Outline 


Indented shows how to indent an element from the sides of its container. 
Offset Static shows how to offset an element from surrounding elements. 
Offset or Indented Static Table shows how to offset a table from its container. 
Offset Float shows how to offset a float from surrounding floats and content. 


Offset Absolute and Offset Fixed shows how to offset an absolute element from the 
position it would have had in the normal flow. 


Offset Relative shows how to offset any element without affecting other elements. 
Aligned Static Inline shows how to align inline elements horizontally and vertically. 
Aligned and Offset Static Block shows how to align and offset static block elements. 
Aligned and Offset Static Table shows how to align and offset tables. 

Aligned and Offset Absolute shows how to align and offset absolute elements. 
Aligned-center Absolute shows how to center absolute elements. 


Aligned Outside shows how to align elements to the outside of their container. 
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CHAPTER 8 ™ POSITIONING: INDENTED, OFFSET, AND ALIGNED 


indented 


© Indented - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Indented 
Vertically 


— Stretched 
Positioned Grandparent Absolute 


Non-positioned Parent 
Horizontally Stretched Static 








Horizontally Stretched Absolute 





HTML 


«hi»Indented«/h1» 
«div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<div id="hss" class="s">Horizontally Stretched Static</div> 
<div id="vsa" class="s">Vertically Stretched Absolute</div> 
<span id="hsa" class="s">Horizontally Stretched Absolute</span> 
</div> 
</div> 


CSS 


*.gp { position:relative; z-index:10; } 


#hss { position:static; 
width:auto; margin-left:30px; margin-right:30px; 
height:auto; margin-top:auto; margin-bottom:20px; ] 


#vsa ( position:absolute; 
width:120px; left:auto; margin-left:auto; right:0; margin-right:70px; 
height:auto; top:0; margin-top:-30px; bottom:0; margin-bottom:-30px; } 


#hsa ( position:absolute; 
width:auto; left:0; margin-left:-30px; right:0; margin-right:-30px; 


height:auto; top:auto; margin-top:30px; bottom:auto; margin-bottom:auto; ] 


/* Nonessential rules are not shown. */ 


Indented 


Problem 


Solution 


Patterns 


Location 


Limitations 


Related to 


See also 


CHAPTER 8 ™ POSITIONING: INDENTED, OFFSET, AND ALIGNED 


You want to indent the left and right sides of a static element, or you want to 
indent the left, right, top, and bottom sides of a stretched absolute element. You 
also want to outdent these elements. 


Indenting is a combination of stretching an element to the sides of its container 
and then offsetting its sides. Indenting to the inside shrinks the size of an 
element. Indenting to the outside (or outdenting) expands the size of an 
element. Each side may be indented or outdented independently. Margins 
expand or shrink the height and width of a stretched element. Contrast this 
with the offset design patterns where margins move a sized or shrinkwrapped 
element without changing its size. 


Positive margins indent and negative margins outdent. In other words, positive 
margins move sides toward the center, and negative margins move them away 
from the center. You can use left:0, right:0, top:0, and bottom:0 to align the 
sides of the absolute element to the sides of its closest positioned ancestor. Once 
opposite sides of an element are aligned to its container (in other words, the 
element is stretched), margins can indent or outdent each side independently. 


Horizontally Indented Static Block Element 
BLOCK-SELECTOR ( position:static; width:auto; 
margin-left:*VALUE; 
margin-right:+VALUE; } 


Horizontally Indented Absolute Element 
SELECTOR { position:absolute; width:auto; 
left:0; margin-left:+VALUE; 
right:0; margin-right:+VALUE; } 


Vertically Indented Absolute Element 
SELECTOR { position:absolute; height:auto; 
top:0; margin-top:+VALUE; 
bottom:0; margin-bottom:+VALUE; } 


This pattern works on static block elements and absolute elements. 


You cannot vertically stretch and indent a static element. 

You cannot stretch and indent a float. 

You cannot stretch and indent an inline-text element. 

You cannot indent or outdent an element that is stretched using 

width: 100% or height: 100%. 

Internet Explorer 6 cannot stretch absolute elements; it shrinkwraps them. 


Sized, Shrinkwrapped (Chapter 5); Margin (Chapter 6); Static, Absolute 

(Chapter 7); Text Indent, Hanging Indent (Chapter 12); Lists, Left Marginal, Right 
Marginal (Chapter 13); Padded Graphic Dropcap, Floating Dropcap, Floating 
Graphic Dropcap, Marginal Dropcap, Marginal Graphic Dropcap (Chapter 18); 
Left Marginal Callout, Right Marginal Callout (Chapter 19); Hanging Alert, Left 
Marginal Alert, Right Marginal Alert (Chapter 20) 


www. cssdesignpatterns.com/indented 
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Offset Static 


^d Offset Static - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 


Offset Static 


Moved-left > Moved-right | Push-right > | Pull-left < [None] 


l 
Moved-down. Static Block 
fl 




















Moved-up Static Block 
Push-down a Block 











Pull-up oe Block 
None 


<h1>0ffset Static</h1> 
<div> 
<span class="moved-left">&larr; Moved-left </span> 
<span class="moved-right">&rarr; Moved-right </span> 
<span class="push-right">Push-right &rarr; </span> 
<span class="pull-left">Pull-left &larr; &nbsp; </span> 
<em>None</em> 
</div> 
<div class-"moved-down center"»8darr;«br /»Moved-down Static Block </div> 
«div class="moved-up center"»8uarr;«br /»Moved-up Static Block</div> 
«div class="push-down center"»Push-down Static Block«br />&darr;</div> 
«div class-"pull-up center">Pull-up Static Block«br />&uarr;</div> 
«div class-"center"»None«/div» 





HTML 
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CSS 


*.moved-left ( margin-left:-26px; ) *.push-right ( margin-right:50px; ) 
*.moved-right ( margin-left:50px; ) *.pull-left ( margin-right:-20px; ) 
*.moved-down ( margin-top:20px; } *.push-down ( margin-bottom:20px; ) 
*.moved-up ( margin-top:-13px; ) *.pull-up ( margin-bottom:-16px; ) 


/* Nonessential rules are not shown. */ 
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Offset Static 


Problem You want to control the spacing between static elements in the normal flow 
by moving them closer together or further apart. 


Solution Margins offset sized and shrinkwrapped elements. Left and top margins 
offset an element from the ending position set by the previous element. 
Right and bottom margins define the starting position of the following 
element. Negative margins move an element closer to surrounding elements, 
and positive margins move an element farther away. In other words, 
margins extend or retract the starting and ending positions of sized and 
shrinkwrapped elements. 


For example, you can use a positive value in margin-left to move an inline 
element to the right, and a negative value to move it to the left. A negative left 
margin can cause an inline element to overlap or precede the previous inline 
element, or overlap the left side of its containing block! margin-right does not 
affect an inline element's position; it affects the following element's position. 
A positive value in margin-right pushes the next element to the right, anda 
negative value pulls it to the left. A negative right margin can cause the 
following inline element to overlap or precede an element! 


margin-top and margin-bottom work similarly with block elements except that 
they pull and push blocks up and down. margin-top moves a block up or 
down, and margin-bottom moves the following block up or down. Negative 
margins can move blocks on top of neighboring blocks. 


Inline Patterns Left-extended Static Inline Element (Moved-right) 
INLINE-SELECTOR { position:static; margin-left:+VALUE; } 


Left-retracted Static Inline Element (Moved-left) 
INLINE-SELECTOR { position:static; margin-left:-VALUE; } 


Right-extended Static Inline Element (Push-right) 
INLINE-SELECTOR { position:static; margin-right:+VALUE; } 


Right-retracted Static Inline Element (Pull-left) 
INLINE-SELECTOR { position:static; margin-right:-VALUE; } 


Block Patterns Top-extended Static Block Element (Moved-down) 
BLOCK-SELECTOR { position:static; margin-top:+VALUE; } 


Top-retracted Static Block Element (Moved-up) 
BLOCK-SELECTOR { position:static; margin-top:-VALUE; } 


Bottom-extended Static Block Element (Push-down) 
BLOCK-SELECTOR { position:static; margin-bottom:+VALUE; } 


Bottom-retracted Static Block Element (Pull-up) 
BLOCK-SELECTOR { position:static; margin-bottom:-VALUE; } 


Location This pattern applies to all static elements. 


Related to Offset Relative, Aligned Static Inline, Aligned and Offset Static Block; Sized, 
Shrinkwrapped (Chapter 5); Static (Chapter 7); all offset design patterns in 
Chapter 9; Spacing, Inline Spacer, Inline Decoration, Linebreak, Inline 
Horizontal Rule (Chapter 11); Vertical-offset Content (Chapter 12); Block 
Horizontal Rule, Block Spacer, Block Space Remover (Chapter 13) 
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See also www.cssdesignpatterns.com/offset-static 
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Offset or Indented Static Table 


© Offset or Indented Static Table - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Offset or Indented Static Table 
Left-offset Shrinkwrapped Table| 








Right-offset Shrinkwrapped Table| 
Indented Stretched Table | 
| Right-offset Sized Table] 
Left-offset Sized Table | 














HTML 


<h1>0ffset or Indented Static Table</h1> 


<div class="parent"> 

<table class="1-wrap"><tr><td>Left-offset Shrinkwrapped Table«/td»«/tr»«/table» 
<table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table> 
<table class="stretched"><tr><td>Indented Stretched Table</td></tr></table> 
<table class="r-sized"><tr><td>Right-offset Sized Table</td></tr></table> 

<table class="1-sized"><tr><td>Left-offset Sized Table«/td»«/tr»«/table» 

</div> 


CSS 


*.l-wrap ( width:auto; margin-left:60px; margin-right:auto; } 
*.r-wrap ( width:auto; margin-left:auto; margin-right:60px; } 


*.stretched ( width:80%; margin-left:auto; margin-right:auto; } 


*.r-sized ( width:300px; margin-left:auto; margin-right:60px; text-align:right; } 
*.l-sized ( width:300px; margin-left:60px; margin-right:auto; text-align:left; } 


/* Nonessential rules are not shown. */ 
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Offset or Indented Static Table 


Problem 


Solution 


HTML Pattern 
CSS Patterns 


Location 


Limitations 


Tips 


Related to 


See Also 


You want to offset a shrinkwrapped or sized table in the normal flow, or you want 
to indent a stretched table in the normal flow. 


You can offset a sized or shrinkwrapped table using left and right margins. 

You can use a negative margin to move the table away from the center of its 
container, and you can use a positive margin to move the table toward the center 
of its container. When you assign a value to margin-left, you need to assign 
margin-right to auto, and vice versa. 


You can indent a stretched table equally on both sides by reducing its width to a 
percentage less than 10096 and setting the left and right margins to auto. This 
creates a centered effect where both sides are indented equally. Because of 
browser incompatibilities and because you have to use width: 1005 to stretch a 
table to the width of its container, there is no automatic way to indent left and 
right sides unequally and keep the table stretched. On the other hand, since 
block elements stretch automatically to the width of their container, you can 
indent the left and right sides of a block unequally. 


Unlike positioned elements, you cannot center a table and then offset it. 
«table»«tr»«td»CONTENT«/td»«/tr» «/table» 


Left-offset Shrinkwrapped Static Table 
SELECTOR ( position:static; width:auto; 
margin-left:+VALUE; margin-right:auto; } 
Right-offset Shrinkwrapped Static Table 
SELECTOR { position:static; width:auto; 
margin-left:auto; margin-right:+VALUE; } 
Offset Stretched Static Table 

SELECTOR { position:static; width:100%; 
margin-left:auto; margin-right:auto; } 
Left-offset Sized Static Table 

SELECTOR { position:static; width:+VALUE; 
margin-left:+VALUE; margin-right:auto; } 
Right-offset Sized Static Table 


SELECTOR { position:static; width:+VALUE; 
margin-left:auto; margin-right:+VALUE; } 








This pattern applies to table elements. 


Internet Explorer versions 6 and 7 have a bug that ignores margin-left whena 
shrinkwrapped table is a child of any element besides <body>. 


Margins apply to the table element, but they do not apply to cells, rows, row 
groups, columns, or column groups. 


Left Aligned, Right Aligned, Centered Aligned (Chapter 9); Sized, Shrinkwrapped, 
Stretched (Chapter 5); Table (Chapter 15) 


www.cssdesignpatterns.com/offset-static-table 
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Offset Float 


© Offset Float - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Offset Float 
| Right-retracted Float] | Left-retracted Float] 





Right-extended & 
top-extended Float 





HTML 


«hi»Offset Float</h1> 

«div» 
«p class="float-left sized">Sized Float</p> 
<p class="float-left right-retracted">Right-retracted Float</p> 
<p class="float-left shrunk">Float</p> 


<p class="float-right sized">Sized Float</p> 

<p class="float-right left-retracted">Left-retracted Float</p> 

<p class="float-right shrunk">Float</p> 

<p class="float-right widened right-extended top-extended"> 
Right-extended &amp; Top-extended Float</p> 

<p class="float-left clear-left shrunk">Float</p> 

<p class="float-right clear-right shrunk">Float</p> 

</div> 
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CSS 


*.sized ( width:70px; height:60px; margin:10px; } 
*.widened ( width:175px; j 
.shrunk ( margin:3px; padding:ipx; background-color:white; } 


* 


.right-extended { margin-right:120px; } 
.right-retracted ( margin-right:-55px; } 
.left-retracted ( margin-left:-185px; } 
.top-extended { margin-top:20px; ) 


* + * F 


.float-left ( float:left; } *.float-right { float:right; } 
.clear-left ( clear:left; ) *.clear-right { clear:right; } 


* * 


/* Nonessential rules are not shown. */ 
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Offset Float 


Problem You want to control the spacing between floats by moving them closer 
together or further apart. 


Solution A float’s margins work just like static inline elements and blocks. Positive 
margins push content and other floats away, and negative margins bring 
them closer. Large enough negative margins can cause floats to overlap 
with each other and with neighboring inline content. 


Thus, floats exist in their own flow where the position of one float 
affects the position of neighboring floats and inline content. Contrast 
this with absolute and fixed elements where each one is positioned 
independently. 


Margins offset floats rather than indent them because they do not change 
their size, they change their position. 


Horizontal Patterns Left-extended Float 
SELECTOR { float:LEFT OR RIGHT; margin-left:+VALUE; } 


Left-retracted Float 
SELECTOR { float:LEFT OR RIGHT; margin-left:-VALUE; } 
Right-extended Float 
SELECTOR { float:LEFT OR RIGHT; margin-right:+VALUE; } 
Right-retracted Float 
SELECTOR { float:LEFT OR RIGHT; margin-right:-VALUE; } 
Vertical Patterns Top-extended Float 
SELECTOR { float:LEFT OR RIGHT; margin-top:+VALUE; } 
Top-retracted Float 
SELECTOR { float:LEFT OR RIGHT; margin-top:-VALUE; } 
Bottom-extended Floa 
SELECTOR { float:LEFT OR RIGHT; margin-bottom:+VALUE; } 


Bottom-retracted Float 
SELECTOR { float:LEFT OR RIGHT; margin-bottom:-VALUE; } 
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Location This pattern applies to all elements. 

Advantages Floats can create versatile layouts. These layouts easily reflow to fit 
displays of all sizes. 

Disadvantages Floats tend to trigger browser bugs in all browsers, but particularly in 
Internet Explorer 6. 

Tips Stacking floats to the left or right aligns floats, and extending or 
retracting margins fine-tunes their position. 

Related to Float and Clear (Chapter 7); Outside-in Box, Floating Section, Float 


Divider, Fluid Layout, Opposing Floats (Chapter 17); Floating Dropcap, 
Floating Graphic Dropcap (Chapter 18); Left Floating Callout, Right 
Floating Callout (Chapter 19); Floating Alert (Chapter 20) 


See also www. cssdesignpatterns.com/offset-float 
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Offset Absolute and Offset Fixed 


© Offset Absolute and Offset Fixed - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Offset Absolute and Offset Fixed 


Positioned Grandparent 





Non-positioned Parent 


The default position of an offset absolute element is where it would have 
been rendered if it were not absolutely positioned: Absolute 





You can use left and top margins to offset it from its default position: 





HTML 


<h1>0ffset Absolute and Offset Fixed</h1> 


«div class="gp"><h2>Positioned Grandparent</h2> 
<div class="parent"><h2>Non-positioned Parent</h2> 
The default position of an offset absolute element is where it would have 
been rendered if it were not absolutely positioned: 
«span id-"absolute" class="border">Absolute</span> 
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<p>You can use left and top margins to offset it from its 
default position: <span id="fixed" class="border">Fixed</span></p> 
</div> 
</div> 


CSS 


#absolute ( position:absolute; width:140px; height:auto; } 
#fixed ( position:fixed; 

height:50px; margin-top:10px; 

width:auto; margin-left:10px; } 


/* Nonessential rules are not shown. */ 
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Offset Absolute and Offset Fixed 


Problem 


Solution 


Patterns 


Location 


Advantages 


Tips 


Example 


Related to 


See also 


You want to remove an element from the normal flow and offset it from the 
position it would have had in the flow. Unlike the Offset Relative design pattern, 
you do not want the element to retain its exact shape that it would have had in 
the normal flow. Instead, you want it to be rendered as a block that can be sized 
or shrinkwrapped. You optionally want the element to be fixed to the viewport so 
it does not scroll when the document scrolls. 


You can use position:absolute to position the element absolutely or 
position: fixed to lock its position so it does not scroll with the document. 
Do not set left, right, top, or bottom to a value other than auto, or you will 
align the element to its closest positioned ancestor. Since auto is their default 
value, you can omit left, right, top, and bottom. 


You can use margin-top and margin-left to offset the element from the position 
it would had in the normal flow. Positive values move it down and right, and 
negative values move it up and left. You can use width:auto or height:auto to 
shrinkwrap the element, or you can use width: «VALUE or height : «VALUE to size it. 


Shrinkwrapped-offset Absolute Element 

SELECTOR { position:ABSOLUTE FIXED; 
height:auto; width:auto; 
margin-top:+VALUE; margin-left:+VALUE; } 


Sized-offset Absolute Element 

SELECTOR { position:ABSOLUTE_FIXED; 
height:+VALUE; width:+VALUE; 
margin-top:tVALUE; margin-left:+VALUE; } 


This pattern applies to all elements. 


This pattern allows you to remove an element from the normal flow, shrinkwrap 
or size it, and then offset it from the position it would have had in the normal 
flow. Contrast this with the Aligned and Offset Absolute design pattern where 
an absolute element is aligned and offset from an edge of its closest positioned 
ancestor. 


The horizontal and vertical dimensions are independent. You can shrinkwrap 
one dimension and size the other. You can also align one dimension to an edge 
of the closest positioned ancestor and offset the other dimension from the 
position it would have had in the normal flow. 


Notice how both the absolute and the fixed spans are located in the flow where 
they would have been located if they were not positioned. Margins vertically and 
horizontally offset the fixed span by 10 pixels. 


Aligned and Offset Absolute; Sized, Shrinkwrapped (Chapter 5); Margin 
(Chapter 6); Positioned, Closest Positioned Ancestor, Absolute, Fixed (Chapter 7) 


www. cssdesignpatterns.com/offset-absolute 
www. cssdesignpatterns.com/offset-fixed 
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Offset Relative 


© Offset Relative - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Offset Relative 





dered 
When inline content is relatively offset, it retains its —“""* 


h 
wide —including line breaks. 


s Sized 
Indented Static Block 








HTML 


<h1>0ffset Relative</h1> 
<div> 
<p class="relative offset-none"> 
When inline content is relatively offset, it retains its 
«span class="relative offseti"> rendered shape</span>—including 
line breaks.</p> 
<p class="relative offset2 float">Float </p> 
<p class="relative offset3 sized">Sized Static </p> 
<p class="relative offset4 indented">Indented Static Block </p> 
</div> 
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CSS 


*.float ( float:left; width:90px; height:40px; } 
.sized ( width:90px; height:40px; margin-left:auto; margin-right:0; } 
.indented ( margin-left:60px; margin-right:60px; } 


* * 


*.relative ( position:relative; ) 


*.offseti ( left:Opx; top:-12px; ) 
*.offset2 ( left:-50px; top:10px; ) 
*.offset3 ( left:50px; top:10px; ) 
*.offset4 ( left:Opx; top:-32px; ) 


/* Nonessential rules are not shown. */ 


CHAPTER 8 ™ POSITIONING: INDENTED, OFFSET, AND ALIGNED 


Offset Relative 


Problem 


Solution 


Patterns 


Location 
Limitations 


Example 


Related to 


See also 


You want to offset an element up, down, left, or right from its position in the 
normal flow or floating flow. You want the offset to have no effect on the position 
of other elements. And unlike the Offset Absolute and Offset Fixed design 
patterns, you want the element to retain its exact shape (size, line breaks, line 
spacing, etc.) that it would have had in the normal flow. 


A relative element is a float or static element that is set to position: relative. It is 
initially positioned by the normal or floating flow. 


You can use top and left to offset it from this position. Positive values move it 
down and right, and negative values move it up and left. Unlike an element's 
margins, relative offsets have absolutely no effect on the position of other 
elements. 


A relative element is rendered in a layer without leaving the flow. This allows you 
to overlap elements and control their stacking order using z-index. A relative 
element is positioned, which allows absolute descendants to be positioned 
relative to it. A relative element is atomic, which means external elements cannot 
be layered in between its static descendants, inline content, and its background. 
If z- index is set to a nonzero value, a relative element creates its own stacking 
context, which means no external elements can be layered between any of its 
descendants even if they are positioned. 


SELECTOR { position:relative; top:+VALUE; left:+VALUE; 
z-index:+VALUE } 


This pattern applies to all elements. 
A relative element cannot be absolute or fixed at the same time. 


Notice in the example how the inline span retains its shape when offset relatively. 
Also notice how the left float is relatively offset to the left by 50 pixels, the sized 
static block is offset to the right by 50 pixels, and both are lowered 10 pixels. The 
indented static block is raised 32 pixels to fit between the float and the sized 
static block. 


Positioned, Closest Positioned Ancestor, Static, Absolute, Fixed, Relative, Relative 
Float (Chapter 7); Nested Alignment (Chapter 12); Floating Dropcap, Floating 
Graphic Dropcap (Chapter 18); Left Floating Callout, Right Floating Callout, 
Center Callout, Block Quote (Chapter 19) 


www. cssdesignpatterns.com/offset-relative 
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Aligned Static Inline 


© Aligned Static Inline - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Aligned Static Inline 
Left-aligned content | 


Horizontally and Vertically Center-aligned Content | 











Right-aligned content | 


Justify-aligned works on all but the last line. This line is justified but the 
last line is not. 








Raised relative to... 


Aligned to baseline. Lowered relative to the baseline. 








HTML 


«hi»Aligned Static Inline</h1> 
«div» 
«p id-"l"»Left-aligned content«/p» 
«p id-"c"»Horizontally and Vertically Center-aligned Content«/p» 
«p id="r">Right-aligned content</p> 
<p id="j">Justify-aligned works on all but the last line. This line is 
justified but the last line is not.</p> 
<p><span class-"baseline"»Aligned to baseline.</span> 
<span class="lowered">Lowered relative to the baseline.</span> 


<span class="raised">Raised relative to... </span></p></div> 
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CSS 


*.baseline ( vertical-align:baseline; ] 
*.raised { vertical-align:10px; } 
*.lowered { vertical-align:-10px; } 


#1 { position:static; text-align:left; } 

#c { position:static; text-align:center; line-height:48px; } 
#r { position:static; text-align:right; } 

#j ( position:static; text-align:justify; } 


/* Nonessential rules are not shown. */ 
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Aligned Static Inline 


Problem You want to align static inline elements horizontally and/or vertically, 
and you want to offset them from their alignment. 


Solution To horizontally align content to the sides of its terminal block container, 
you can use text-align. text-align:left aligns content to the left side. 
text-align:right aligns content to the right side. text-align:center 
centers content. text-align: justify aligns content to the left and right 
sides of its container. For content to be justified, there must be more than 
one line, because the browser does not justify the last line. 


To align inline content to the vertical center of a line, you can set 
line-height to a value larger than the height of the content. This works 
because a browser vertically centers the content of each line. This effect 
does not work when you have more than one line. 


To align inline content vertically, you can use vertical-align:CONSTANT 
or vertical-align:+VALUE. The only time you can see the vertical 
alignment is when items in the same line have different heights or 
different vertical alignment. Vertical alignment does not persist between 
lines because a browser shrinkwraps and vertically centers the content 
of each line. Thus, inline vertical alignment is relative to the content 
actually present in a line. 


Horizontal Patterns Left-aligned Static Inline Element 
TERMINAL-BLOCK-SELECTOR { position:static; text-align:left; } 


Center-aligned Static Inline Element 
TERMINAL-BLOCK-SELECTOR { position:static; text-align:center; } 


Right-aligned Static Inline Element 
TERMINAL-BLOCK-SELECTOR { position:static; text-align:right; } 
Justified Static Inline Element 
TERMINAL-BLOCK-SELECTOR { position:static; text-align:justify; } 
Vertical Patterns Middle-aligned Static Inline Element 

SELECTOR { position:static; line-height:+VALUE; } 


Relative-aligned Static Inline Element 
SELECTOR { position:static; vertical-align:+VALUE; } 


Location These patterns work on inline elements. 


Related to Aligned and Offset Static Block; Left Aligned, Left Offset, Right Aligned, 
Right Offset, Center Aligned, Center Offset (Chapter 9); Invisible Text 
(Chapter 10); Spacing, Blocked (Chapter 11); Horizontal-aligned Content 
(Chapter 12); Table (Chapter 15) 


See also www.cssdesignpatterns.com/aligned-static-inline 
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CHAPTER 8 © POSITIONING: INDENTED, OFFSET, AND ALIGNED 


Aligned and Offset Static Block 


© Aligned and Offset Static Block - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Aligned and Offset Static Block 


Left Aligned 
Left Aligned & Offset | 


| Center 


Aligned 








Right Aligned & Offset | 
Right Aligned 


HTML 


«hi»Aligned and Offset Static Block</h1> 

<div class="gp"> 
«p id="left">Left Aligned</p> 
«p id="left-off">Left Aligned &amp; Offset</p> 
<p id="center">Center Aligned</p> 
<p id="right-off">Right Aligned &amp; Offset</p> 
«p id="right">Right Aligned</p> 

</div> 


CSS 


#left { position:static; width:120px; margin-left:0; margin-right:auto; } 
#left-off { position:static; width:200px; margin-left:50px; margin-right:auto; } 
#center { position:static; width:120px; margin-left:auto; margin-right:auto; } 
#right { position:static; width:120px; margin-left:auto; margin-right:0; } 
#right-off { position:static; width:200px; margin-left:auto; margin-right:50px; } 


/* Nonessential rules are not shown. */ 
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Aligned and Offset Static Block 


Problem You want to align a static block element to the left side, right side, or center of its 
parent, and you want to offset it from its alignment. 


Solution Sized blocks can be aligned and offset from their container. Static blocks cannot 
be horizontally shrinkwrapped, and thus are either sized or stretched. If a block 
is stretched, it cannot be aligned and offset because it is indented. 

- Use width:+VALUE to specify an element’s width. You cannot align a static block 
unless you set its width to a measurement or percentage. 


To align to the left side: 

- Use margin-right: auto to align the element to the left side. 

- Use margin-left:+VALUE to offset the element to the right of the left side. 
- Use margin-left: -VALUE to offset the element to the left of the left side. 


To align to the center: 
- Use both margin-left:auto and margin-right: auto to horizontally center the 
element within its container. 


To align to the right side: 

- Use margin-left: auto to align the element to the right side. 

- Use margin-right:+VALUE to offset the element to the right of the right side. 
- Use margin-right:-VALUE to offset the element to the left of the right side. 


Patterns Left-aligned Sized Static Block Element 
BLOCK-SELECTOR { position:static; width:+VALUE; 
margin-left:+VALUE; margin-right:auto; } 


Center-aligned Sized Static Block Element 
BLOCK-SELECTOR { position:static; width:+VALUE; 
margin-left:auto; margin-right:auto; } 


Right-aligned Sized Static Block Element 
BLOCK-SELECTOR { position:static; width:+VALUE; 
margin-left:auto; margin-right:+VALUE; } 
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Location This pattern works on static block elements. 





Explanation A static element expands to fill the width of its container. When you set the 
width of a static element, its width no longer fills the container. Instead, its 
margins expand to fill the container. You can use the auto value to control 
which margins expand. margin-left:auto automatically expands the left margin 
to let the element align to the right. Conversely, margin-right :auto expands 
the right margin to let the element align to the left. margin-left: auto and 
margin-right:auto automatically expand both margins equally to center the 


element. 

Limitations You cannot vertically align a static block element because it is always aligned to 
the top of its parent block or below its previous sibling. 

Related to Aligned Static Inline; Sized (Chapter 5); Left Aligned, Left Offset, Right Aligned, 


Right Offset, Center Aligned, Center Offset (Chapter 9); Left Marginal, Right 
Marginal (Chapter 13); Marginal Dropcap, Marginal Graphic Dropcap 
(Chapter 18); Left Marginal Callout, Right Marginal Callout (Chapter 19); 
Left Marginal Alert, Right Marginal Alert (Chapter 20) 


See also Www.cssdesignpatterns.com/aligned-offset-static-block 
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CHAPTER 8 © POSITIONING: INDENTED, OFFSET, AND ALIGNED 


Aligned and Offset Static Table 


© Aligned and Offset Static Table - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Aligned and Offset Static Table 
Left-aligned Shrinkwrapped Table| 


‘Centered Shrinkwrapped Table 











| Right-offset Shrinkwrapped Table] 
Stretched Table | 
Right-aligned Sized Table 
Centered Sized Table | 
Left-offset Sized Table | 














HTML 


<h1>Aligned Static Table</h1> 

<div class="parent"> 
<table class="1-wrap"><tr><td>Left-aligned Shrinkwrapped Table</td></tr></table> 
<table class="c-wrap"><tr><td>Centered Shrinkwrapped Table</td></tr></table> 
<table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table> 
<table class="stretched"><tr><td>Stretched Table</td></tr></table> 
<table class="r-sized"><tr><td>Right-aligned Sized Table</td></tr></table> 
<table class="c-sized"><tr><td>Centered Sized Table</td></tr></table> 
<table class="l-sized"><tr><td>Left-offset Sized Table</td></tr></table> 

</div> 


CSS 


*.]-wrap ( width:auto; margin-left:0; margin-right:auto; } 
*.c-wrap ( width:auto; margin-left:auto; margin-right:auto; } 
*.r-wrap ( width:auto; margin-left:auto; margin-right:20px; } 


*.stretched ( width:100%; margin-left:0; margin-right:0; } 
*.r-sized ( width:350px; margin-left:auto; margin-right:0; text-align:right; ] 
*.c-sized ( width:350px; margin-left:auto; margin-right:auto; text-align:center; } 


*.l-sized ( width:350px; margin-left:20px; margin-right:auto; text-align:left; } 


/* Nonessential rules are not shown. */ 
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Aligned and Offset Static Table 


Problem You want to align a shrinkwrapped, stretched, or sized table without removing 
it from the normal flow. 


Solution The table is the only element in normal flow that can shrinkwrap to fit the 
width of its content or be sized to a specific width. Block elements cannot be 
shrinkwrapped to their width unless they are positioned or floated. Inline 
elements cannot be sized unless they are positioned or floated. 


Since a table can be shrinkwrapped, sized, and stretched, it is the most 
versatile element. It can also be aligned to the left, right, or center while it 
is shrinkwrapped or sized. 


You can align a table to the left using margin-left:0 and margin-right: auto. 
You can align a table to the right using margin-left: auto and margin-right:0. 
You can align a table to the center using margin-left: auto and 

margin-right: auto. 


You can offset a table by changing the margin to a nonzero value. A positive 
value offsets toward the center, and a negative offsets away from the center. 


HTML Pattern <table><tr><td>CONTENT</td></tr></table> 


CSS Patterns Left-aligned Shrinkwrapped Static Table 
SELECTOR { position:static; 
width:auto; margin-left:0; margin-right:auto; } 
Centered Shrinkwrapped Static Table 
SELECTOR { position:static; 
width:auto; margin-left:auto; margin-right:auto; } 
Right-aligned Shrinkwrapped Static Table 
SELECTOR { position:static; 
width:auto; margin-left:auto; margin-right:0; } 
Stretched Static Table 
SELECTOR { position:static; 

width:100%; margin-left:0; margin-right:0; } 
Left-aligned Sized Static Table 
SELECTOR { position:static; 

width:+VALUE; margin-left:0; margin-right:auto; } 
Centered Sized Static Table 
SELECTOR { position:static; 

width:+VALUE; margin-left:auto; margin-right:auto; } 
Right-aligned Sized Static Table 


SELECTOR { position:static; 
width:+VALUE; margin-left:auto; margin-right:0; } 
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Location This pattern applies to table elements. 

Related to Sized, Shrinkwrapped, Stretched (Chapter 5); Left Aligned, Left Offset, 
Right Aligned, Right Offset, Center Aligned, Center Offset (Chapter 9); 
Table (Chapter 15) 


See Also www.cssdesignpatterns.com/aligned-static-table 
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Aligned and Offset Absolute 


© Aligned and Offset Absolute - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Aligned and Offset Absolute 


Left-top Aligned & Offset Right-top Aligned & Offset 





Center-middle Aligned 


Left-bottom Aligned & Offset | Right-bottom Aligned & Offset | 











HTML 


<hi>Aligned and Offset Absolute«/hi» 
«div» 
«p id="1t">Left-top Aligned &amp; Offset</p> 
<p id="1b">Left-bottom Aligned &amp; Offset«/p» 
<p id="cm">Center-middle Aligned</p> 
<p id="rt">Right-top Aligned &amp; Offset</p> 
<p id="rb">Right-bottom Aligned &amp; Offset</p> 
</div> 
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CSS 





div ( position:relative; } 


"lt ( position:absolute; 
width:auto; left:0; margin-left:8px; right:auto; margin-right:auto; 
height:auto; top:0; margin-top:8px; bottom:auto; margin-bottom:auto; } 
#1b ( position:absolute; 
width:240px; left:0; margin-left:8px; right:auto; margin-right:auto; 
height:18px; top:auto; margin-top:auto; bottom:0; margin-bottom:8px; } 
#cm ( position:absolute; 
width:200px; left:0; margin-left:auto; right:0; margin-right:auto; 
height:18px; top:0; margin-top:auto; bottom:0; margin-bottom:auto; } 
#rt { position:absolute; 
width:220px; left:auto; margin-left:auto; right:0; margin-right: 8px; 
height:18px; top:0; margin-top:8px; bottom:auto; margin-bottom:auto; } 
#rb { position:absolute; 
width:auto; left:auto; margin-left:auto; right:0; margin-right: 8px; 
height:auto; top:auto; margin-top:auto; bottom:0; margin-bottom:8px; } 








/* Nonessential rules are not shown. */ 
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Aligned and Offset Absolute 


Problem 


Solution 


Patterns 


Location 


Example 


Related to 


See also 


You want to align an absolutely positioned element to the left, right, top, or 
bottom of its closest positioned ancestor. You also want to offset it from its 
alignment. You also want to size or shrinkwrap the element. 


Apply styles to your chosen class or ID as follows: 
- Use width:+VALUE and height : » VALUE to size the element. 
- Use width: auto and height: auto to shrinkwrap the element. 


To offset from the left side: 

- Use left:0 and right: auto to align an element to the left. 

- Use margin-left:+VALUE to offset the element to the right of the left side. 
- Use margin-left: -VALUE to offset the element to the left of the left side. 


To offset from the right side: 

- Use right:0 and left: auto to align an element to the right. 

- Use margin-right:+VALUE to offset the element to the left of the right side. 

- Use margin-right: -VALUE to offset the element to the right of the right side. 


To offset from the top: 

- Use top:0 and bottom: auto to align an element to the top. 

- Use margin-top:+VALUE to offset the element below the top. 
- Use margin-top: - VALUE to offset the element above the top. 


To offset from the bottom: 

- Use bottom:0 and top: auto to align an element to the bottom. 

- Use margin-bottom:+VALUE to offset the element above the bottom. 
- Use margin-bottom: -VALUE to offset the element below the bottom. 


Left-offset Absolute Element 
SELECTOR { position:absolute; left:0; right:auto; 
margin-left:*VALUE; margin-right:auto; } 


Right-offset Absolute Element 
SELECTOR { position:absolute; left:auto; right:0; 
margin-left:auto; margin-right:+VALUE; } 





Top-offset Absolute Element 
SELECTOR { position:absolute; top:0; bottom:auto; 
margin-top:+VALUE; margin-bottom:auto; } 


Bottom-offset Absolute Element 
SELECTOR { position:absolute; top:auto; bottom:0; 
margin-top:auto; margin-bottom:+VALUE; } 














This pattern applies to all elements. 


Each absolute element in the example is shrinkwrapped. Each could be sized 
without affecting the alignment or the offset. The centered element is discussed 
in the next design pattern—Aligned-center Absolute. I included it in the example 
because it is a combination of all four of these design patterns. 


Sized, Shrinkwrapped (Chapter 5); Margin (Chapter 6); Positioned, Closest 
Positioned Ancestor, Absolute, Fixed (Chapter 7); all design patterns in 
Chapter 9; Text Replacement, Screenreader Only (Chapter 10); Left Marginal, 
Right Marginal (Chapter 13); Content-over Image, Content-over Background 
Image (Chapter 14); Flyout Menu (Chapter 17); Marginal Dropcap, Marginal 
Graphic Dropcap (Chapter 18); Left Marginal Callout, Right Marginal Callout 
(Chapter 19); Popup Alert, Graphical Alert, Left Marginal Alert, Right Marginal 
Alert (Chapter 20) 


www. cssdesignpatterns.com/aligned-offset-absolute 
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Aligned-center Absolute 


©) Aligned-center Absolute - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Aligned-center Absolute 





Horizontally & Vertically 
Centered 





HTML 


«hi»Aligned-center Absolute</h1> 
<div> 

«p id="cm" class-"hc vc"»Horizontally &amp; Vertically Centered«/p» 
«/div» 


CSS 


div ( position:relative; } 
#cm ( position:absolute; } 
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*.hc ( width:200px; left:0; margin-left:auto; right:0;  margin-right:auto; } 
*.vc { height:40px; top:0;  margin-top:auto;  bottom:0; margin-bottom:auto; } 





/* Nonessential rules are not shown. */ 


CHAPTER 8 ™ POSITIONING: INDENTED, OFFSET, AND ALIGNED 


Aligned-center Absolute 


Problem 


Solution 


Patterns 


Location 


Limitations 


Explanation 


Related to 


See also 


You want to align an absolutely positioned element to horizontal and/or vertical 
center of its closest positioned ancestor. 


Apply styles to your chosen class or ID as follows: 


To horizontally center: 

- Use width: *VALUE to specify the element's width. 

- Use left:0 and right:0 to align the element to the left and right sides. 
- Use margin-left:auto and margin-right:auto to center the element. 


To vertically center: 

- Use height :+VALUE to specify the element's height. 

- Use top:0 and bottom:0 to align the element to the top and bottom. 
- Use margin-top:auto and margin-bottom: auto to center the element. 


Vertically Aligned-center Absolute Element 
SELECTOR { position:absolute; left:0; right:0; 
margin-left:auto; margin-right:auto; } 


Horizontally Aligned-center Absolute Element 
SELECTOR ( position:absolute; left:0; right:0; 
margin-left:auto; margin-right:auto; ] 


This pattern applies to all elements. 
This pattern does not work in Internet Explorer 7 (and earlier versions) because 


it does not support aligning to the left and right sides at the same time, and it 
does not support aligning to the top and bottom sides at the same time. 


This is an extension of the Aligned and Offset Absolute design pattern. It aligns 
an element to the sides of its closest positioned ancestor and then uses 
automatic margins to center it. The element must be sized for automatic 
margins to work. 


Indented; Positioned, Closest Positioned Ancestor, Absolute, Fixed (Chapter 7); 
Center Aligned, Center Offset, Middle Aligned, Middle Offset (Chapter 9) 


www.cssdesignpatterns.com/aligned-center-absolute 
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Aligned Outside 


© Aligned Outside - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Aligned Outside 
Absolute 


| Absolute Outside 
| Outside | Top 
| Top Left | Right 





| Sized Block Outside Left 





Sized Block Outside Right 


| Sized Float Outside Left Sized Float Outside Right 


| Absolute Absolute 
Outside Outside 
Bottom Bottom 
Left Right 








HTML 


«hi»Aligned Outside</h1> 

«div class="parent">Parent 
«p class="sized-block-outside-left">Sized Block Outside Left</p> 
<p class="sized-block-outside-right">Sized Block Outside Right</p> 
<p class="sized-float-outside-left">Sized Float Outside Left</p> 
<p class="sized-float-outside-right">Sized Float Outside Right</p> 
<p class="top left">Absolute Outside Top Left</p> 
<p class="top right">Absolute Outside Top Right</p> 
<p class="bottom left">Absolute Outside Bottom Left</p> 
<p class="bottom right">Absolute Outside Bottom Right</p> </div> 
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CSS 


*.parent ( position:relative; height:140px; width:200px; ] 


.sized-block-outside-left ( width:220px; margin-left:-234px; ] 
.sized-block-outside-right ( width:220px; margin-left:100%; } 
.sized-float-outside-left ( width:220px; margin-left:-234px; float:left; } 
.sized-float-outside-right { width:220px; margin-left:100%; float:left; } 


* + + * 


.left ( position:absolute; right:100%; margin-right:5px; } 
.right { position:absolute; left:100%; margin-left:5px; } 
.top { position:absolute; bottom:100%; margin-bottom:5px; } 
.bottom { position:absolute; top:100%; margin-top:5px; } 


* * * X 


/* Nonessential rules are not shown. */ 
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Aligned Outside 


Problem You want to align an element to the outside of its container. For example, you 
want to align the left side of an element to the right side of its container, or vice 
versa. Or you want to align the bottom of an element to the top of its container, 
or vice versa. 


Solution You can align an absolute element to the outside of any of the four sides of its 
closest positioned ancestor. Since 100% is the width of an element's container, 
offsetting an element 100% from one side aligns it to the outside of the other 
side. In addition, you can use margin to offset the element further. An aligned- 
outside absolute element can be sized or shrinkwrapped. 


You can align static blocks and floats to the outside left or right sides of their 
parent, but not to the top or bottom. They must be sized. The technique 
described previously can align blocks and floats to the outside right, but not 
to the outside left. To align blocks and floats to the outside left, you need to 
put the negative of the element's outer width in margin-left. The outer width 
is the inner width plus left and right padding and borders. 


Patterns Sized Block Aligned Outside Left 
SELECTOR { width:INNER; margin-left:-OUTER; } 


Sized Block Aligned Outside Right 
SELECTOR { width:INNER; margin-left:100%; } 
Sized Float Aligned Outside Left 
SELECTOR { width: INNER; margin-left:-OUTER; float:left; } 


Sized Float Aligned Outside Right 
SELECTOR { width: INNER; margin-left:100%; float:left; } 


Absolute Aligned Outside Left 
SELECTOR { right:100%; margin-right:+OFFSET; position:absolute; } 


Absolute Aligned Outside Right 
SELECTOR { left:100%; margin-left:+OFFSET; position:absolute; } 


Absolute Aligned Outside Top 
SELECTOR { bottom:100%; margin-bottom:+0FFSET; position:absolute; } 


Absolute Aligned Outside Bottom 
SELECTOR { top:100%; margin-top:+OFFSET; position:absolute; } 
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Location This pattern applies to all elements when positioned absolutely. 


Limitations You cannot align inline elements to the outside of their containers. You cannot 
align static blocks or floats to the outside top or bottom of their containers. 
Internet Explorer 6 cannot outside-align static blocks and floats, but Internet 
Explorer 7 can. 


Related to Aligned and Offset Absolute; Sized, Shrinkwrapped (Chapter 5); Flyout Menu 
(Chapter 17) 


See also www. cssdesignpatterns.com/aligned-outside 


CHAPTER 9 


Positioning: Advanced 


This is the third of three chapters on positioning. It combines the positioning techniques of 
the previous two chapters into 12 design patterns that align and offset static and positioned 
elements to the left, center, right, top, middle, or bottom of its container while stretching, 
sizing, or shrinkwrapping them. This chapter focuses on static and absolute positioned 
elements. 

This chapter combines design patterns from Chapter 8 to align and offset elements from 
their containers. It also introduces new patterns to align and offset elements from the top, 
middle, and bottom of their containers. If you are not already familiar with the design patterns 
in Chapters 5 through 8, you may want to review them. Because aligning and offsetting from 
the left and right sides are similar, you may want to skim over Right Aligned and Right Offset. 


Chapter Outline 


* Left Aligned shows how to align an element to the left side of its container. 

* Left Offset shows how to offset a left-aligned element. 

* Right Aligned shows how to align an element to the right side of its container. 
* Right Offset shows how to offset a right-aligned element. 

* Center Aligned shows how to align an element to the center of its container. 

* Center Offset shows how to offset a center-aligned element. 

* Top Aligned shows how to align an element to the top of its container. 

* Top Offset shows how to offset a top-aligned element. 

* Bottom Aligned shows how to align an element to the bottom of its container. 
* Bottom Offset shows how to offset a bottom-aligned element. 

* Middle Aligned shows how to align an element to the middle of its container. 


* Middle Offset shows how to offset a middle-aligned element. 
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Left Aligned 


© Left Aligned - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Left Aligned 


Positioned Grandparent 





Non-positioned Parent 


Sized Static Block 


Stretched Static Block 


Sized Absolute 
Shrinkwrapped Absolute 


Stretched Absolute 
Pe 








HTML 


«hi»Left Aligned</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="example">Sized Static Block </div> 
«div id="ss" class="example">Stretched Static Block</div> 
<span id="za" class="example">Sized Absolute</span> 
«span id="wa" class="example">Shrinkwrapped Absolute</span> 
«span id="sa" class-"example"»Stretched Absolute</span></div></div> 


CSS 

*.gp { position:relative; height:295px; width:600px; border:2px solid black; j 
*.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
*.example { padding:5px; border:5px solid black; background-color: gold; } 
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#zs { position:static; text-align: left; margin-top: 5px; 
width: 400px; margin-left:0; margin-right:auto; } 

#ss ( position:static; text-align: left; margin-top: 5px; 
width: auto; margin-left:0; margin-right:0; } 

#za { position:absolute; text-align:left; top:0; margin-top:155px; 
width:400px; left:0; margin-left:0; right:auto; margin-right:auto; } 

#wa { position:absolute; text-align:left; top:0; margin-top:200px; 
width:auto; left:0; margin-left:0; right:auto; margin-right:auto; } 

#sa { position:absolute; text-align:left; top:0; margin-top:245px; 





width:auto; left:0; margin-left:0; right:0; margin-right:0; } 
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Left Aligned 


Problem You want to align an element and its content to the left side of its parent or 
closest positioned ancestor. 


Solution To left-align content, assign text-align:left to the containing block. 


To create a left-aligned sized element, you can use width: +VALUE to size it. You 
can use margin-left:0 to align it to the left side. You can use margin-right:auto 
to prevent it from aligning to the right side. For an absolute element, you can 
also use left:0 to align the element to the left side and right:auto to prevent it 
from aligning to the right side. 


To create a left-aligned stretched element, you can use width:auto, 
margin-left:0, and margin-right:0 to stretch its width to the sides of its 
container. For an absolute element, you can also use left:0 and right:0 to 
stretch it to the left and right sides. 


To create a left-aligned shrinkwrapped element, you can use width: auto, 
right: auto, and margin-right: auto to shrinkwrap the width. You can use 
left:0 and margin-left:0 to align it to the left side. 


Patterns Left-aligned Sized Static Block 
BLOCK-SELECTOR { position:static; text-align:left; 
width:+VALUE; margin-left:0; 


margin-right:auto; } 


Left-aligned Stretched Static Block 
BLOCK-SELECTOR { position:static; text-align: left; 
width: auto; margin-left:0; 
margin-right:0; } 
Left-aligned Sized Absolute Element 
SELECTOR { position:absolute; text-align: left; 
width:+VALUE; left:0; margin-left:0; 
right:auto; margin-right:auto; } 


Left-aligned Shrinkwrapped Absolute Element 


SELECTOR { position:absolute; text-align: left; 
width: auto; left:0; margin-left:0; EG 
right:auto; margin-right:auto; } 2 
=! 
Left-aligned Stretched Absolute Element = 
SELECTOR { position:absolute; text-align:left; E 
width:auto; left:0; margin-left:0; > 
right:0; margin-right:0; } = 
Location This pattern applies to all elements. S 
i=] 
Limitations Stretched Absolute patterns do not work in Internet Explorer 6. 
Related to Left Offset, Right Aligned, Center Aligned; Static, Absolute (Chapter 7); Sized, 





Shrinkwrapped, Stretched (Chapter 5); Aligned design patterns in Chapter 8 


See also www. cssdesignpatterns.com/left-aligned 
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Left Offset 


© Left Offset - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Left Offset 


Positioned Grandparent 





Non-positioned Parent 





Sized Absolute: -50px 


Shrinkwrapped Absolute: -50px 


Stretched Absolute: -50px 





HTML 


«hi»Left Offset«/h1» 
«div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="ex"><span>Sized Static Block: +50px</span></div> 
«div id="ss" class="ex"><span>Stretched Static Block: +50px</span></div> 
<span id="za" class="ex"><span>Sized Absolute: -50px</span></span> 
<span id="wa" class="ex"><span>Shrinkwrapped Absolute: -50px</span></span> 
<span id="sa" class="ex"><span>Stretched Absolute: -50px</span></span></div></div> 





& 
2 
a CSS 
= 
E *.gp { position:relative; height:295px; width:600px; border:2px solid black; } 
$ *.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
= 
EZ *.ex { padding:5px; border:5px solid black; background-color:gold; } 
a div.ex span ( margin-left:-60px; border:1px dotted black; } 
span.ex span ( margin-left:30px; border:none; } 
#zs { position:static; text-align: left; margin-top: 5px; 
width: 400px; margin-left: 50px; margin-right:auto; } 
#ss ( position:static; text-align:left; margin-top:5px; 
width:auto; margin-left:50px; margin-right:0; } 
#za ( position:absolute; text-align:left; top:0; margin-top:155px; 
width:400px; left:0; margin-left:-50px; right:auto; margin-right:auto; } 
#wa ( position:absolute; text-align:left; top:0; margin-top:200px; 
width:auto; left:0; margin-left:-50px; right:auto; margin-right:auto;j 
#sa { position:absolute; text-align: left; top:0; margin-top:245px; 


width:auto; left:0; margin-left:-50px; right:0; margin-right:0; } 
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Left Offset 


Problem You want to offset an element and its content from the left side of its parent or 
closest positioned ancestor. 


Solution To offset a left-aligned element from its left side, you can assign a value other 
than zero to margin-left. A positive value in margin-left offsets to the right 
(toward the inside), and a negative value offsets to the left (toward the outside). 
This design pattern is symmetrical to the Right Offset pattern in every way. 


See the Left Aligned design pattern for details on how to left-align an element. 


Patterns Left-offset Sized Static Block 
BLOCK-SELECTOR ( position:static; text-align:left; 
width:+VALUE; margin-left:+VALUE; margin-right:auto; } 


Left-offset Stretched Static Block 
BLOCK-SELECTOR { position:static; text-align: left; 
width:auto; margin-left:+VALUE; margin-right:0; } 


Left-offset Sized Absolute Element 

SELECTOR { position:absolute; text-align: left; 
width:+VALUE; left:0; margin-left: +VALUE; 
right:auto; margin-right:auto; } 


Left-offset Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; text-align: left; 
width: auto; left:0; margin-left: +VALUE; 
right:auto; margin-right:auto; } 


Left-offset Stretched Absolute Element 





SELECTOR { position:absolute; text-align: left; 
width: auto; left:0; margin-left: +VALUE; 
right:0; margin-right:0; } 
Location This pattern applies to all elements. 
Limitations Stretched Absolute patterns do not work in Internet Explorer 6, but they do work 


in version 7. Inline text cannot extend outside a sized block in Internet Explorer 
version 6 or 7. 


Related to Left Aligned, Right Offset, Center Offset; Offset and Aligned design patterns in 
Chapter 8 
See also www. cssdesignpatterns.com/left-offset 
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Right Aligned 


© Right Aligned - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 
Right Aligned 


Positioned Grandparent 





Non-positioned Parent 


Sized Static Block 


Stretched Static Block 





Sized Absolute 
Shrinkwrapped Absolute 


Stretched Absolute 
Pe 





HTML 


<hi>Right Aligned</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="example">Sized Static Block </div> 
«div id="ss" class="example">Stretched Static Block</div> 
<span id="za" class="example">Sized Absolute</span> 
«span id="wa" class-"example"»Shrinkwrapped Absolute</span> 
<span id="sa" class="example">Stretched Absolute</span></div></div> 


CSS 


*.gp ( position:relative; height:295px; width:600px; border:2px solid black; j 
*.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
*.example { padding:5px; border:5px solid black; background-color: gold; } 
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#zs { position:static; text-align: right; margin-top: 5px; 
width: 400px; margin-left:auto; margin-right:0; 

#ss ( position:static; text-align:right; margin-top:5px; 
width:auto; margin-left:0; margin-right:0; 

#za ( position:absolute; text-align:right; top:0; margin-top:155px; 
width:400px; left:auto; margin-left:auto; right:0; margin-right:0; 

"wa ( position:absolute; text-align:right; top:0; margin-top:200px; 
width:auto; left:auto; margin-left:auto; right:0; margin-right:0; 

#sa { position:absolute; text-align:right; top:0; margin-top:245px; 
width:auto; left:0; margin-left:0; right:0; margin-right:0; 
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Right Aligned 


Problem You want to align an element and its content to the right side of its parent or 
closest positioned ancestor. 


Solution This design pattern is symmetrical to Left Aligned in every way. 
To right-align content, assign text-align:right to the containing block. 


To create a right-aligned sized element, you can use width: *VALUE to size it. You 
can use margin-right:0 to align it to the right side. You can use margin-left:auto 
to prevent it from aligning to the left side. For an absolute element, you can also 
use right:0 to align the element to the right side and left:auto to prevent it 
from aligning to the left side. 


To create a right-aligned stretched element, you can use width:auto, 
margin-left:0, and margin-right:0 to stretch its width to the sides of its 
container. For an absolute element, you can also use left:0 and right:0 to 
stretch it to the left and right sides. 


To create a right-aligned shrinkwrapped element, you can use width:auto, 
left:auto, and margin-left:auto to shrinkwrap the width. You can use right:0 
and margin-right:0 to align it to the right side. 


Patterns Right-aligned Sized Static Block 
BLOCK-SELECTOR ( position:static; text-align:right; 
width:+VALUE; margin-left:auto; 


margin-right:0; } 


Right-aligned Stretched Static Block 
BLOCK-SELECTOR { position:static; text-align: right; 
width: auto; margin-left:0; 
margin-right:0; } 


Right-aligned Sized Absolute Element 





SELECTOR { position:absolute; text-align: right; 
width:+VALUE; left:auto; margin-left:auto; 
right:0; margin-right:0; } 
Right-aligned Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; text-align: right; S 
width:auto; left:auto; margin-left:auto; 5 
right:0; margin-right:0; } = 
Right-aligned Stretched Absolute Element $ 
SELECTOR ( position:absolute; text-align:right; S 
width:auto; left:0; margin-left:0; E 
right:0; margin-right:0; } Q 
o 
Location This pattern applies to all elements. 
Limitations Stretched Absolute does not work in Internet Explorer 6, but it does work in 
version 7. 
Related to Left Aligned, Right Offset, Center Aligned; Static, Absolute (Chapter 7); Sized, 


Shrinkwrapped, Stretched (Chapter 5); Aligned design patterns in Chapter 8 


See also www. cssdesignpatterns.com/right-aligned 
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Right Offset 


© Right Offset - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Right Offset 


Positioned Grandparent 





Non-positioned Parent 





Sized Absolute: -50px 


Shrinkwrapped Absolute: -50px 


Stretched Absolute: -50px 





HTML 


<hi>Right Offset</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="ex"><span>Sized Static Block: +50px</span></div> 
«div id="ss" class="ex"><span>Stretched Static Block: +50px</span></div> 
<span id="za" class="ex"><span>Sized Absolute: -50px</span></span> 
<span id="wa" class="ex"><span>Shrinkwrapped Absolute: -50px</span></span> 
<span id="sa" class="ex"><span>Stretched Absolute: -50px</span></span></div></div> 





E 
z 
2 CSS 
z *.gp { position:relative; height:295px; width:600px; border:2px solid black; } 
2 * parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
B *.ex { padding:5px; border:5px solid black; background-color:gold; } 
de div.ex span ( margin-right:-60px; border:1px dotted black; } 
span.ex span { margin-right:30px; border:none; } 
#zs { position:static; text-align:right; margin-top: 5px; 
width: 400px; margin-left: auto; margin-right : 50px; } 
#ss { position:static; text-align:right; margin-top: 5px; 
width: auto; margin-left:0; margin-right:50px; } 
#za { position:absolute; text-align:right; top:0; margin-top:155px; 
width:400px; left:auto; margin-left:auto; right:0; margin-right:-50px; } 
#wa { position:absolute; text-align:right; top:0; margin-top:200px; 
width:auto; left:auto; margin-left:auto; right:0; margin-right:-50px; } 
#sa ( position:absolute; text-align:right; top:0; margin-top:245px; 


width:auto; left:0; margin-left:0; right:0; margin-right:-50px; } 
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Right Offset 


Problem You want to align an element and its content to the right side of its parent or 
closest positioned ancestor. 


Solution To offset a right-aligned element from its right side, you can assign a value other 
than zero to margin-right. A positive value in margin-right offsets to the left 
(toward the inside), and a negative value offsets to the right (toward the outside). 
This design pattern is symmetrical to the Left Offset pattern in every way. 


See the Right Aligned design pattern for details on how to right-align an element. 


Patterns Right-offset Sized Static Block 
BLOCK-SELECTOR { position:static; text-align: right; 
width:+VALUE; margin-left:auto; 


margin-right:+VALUE; } 


Right-offset Stretched Static Block 
BLOCK-SELECTOR { position:static; text-align: right; 
width: auto; margin-left:0; 
margin-right:+VALUE; } 


Right-offset Sized Absolute Element 


SELECTOR { position:absolute; text-align: right; 
width:+VALUE; left:auto; margin-left:auto; 
right:0; margin-right:+VALUE; } 
Right-offset Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; text-align: right; 
width: auto; left: auto; margin-left:auto; 
right:0; margin-right:+VALUE; } 
Right-offset Stretched Absolute Element 
SELECTOR { position:absolute; text-align: right; 
width: auto; left:0; margin-left:0; 
right:0; margin-right:+VALUE; } 
Location This pattern applies to all elements. 
Limitations Stretched Absolute does not work in Internet Explorer 6, but it does work in 
version 7. 
Related to Left Offset, Right Aligned, Center Offset; Offset and Aligned design patterns in 
(Chapter 8) 
See also www.cssdesignpatterns.com/right-offset 
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Center Aligned 


© Center Aligned - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Center Aligned 


Positioned Grandparent 





Non-positioned Parent 


Sized Static Block 
Stretched Static Block 


Sized Absolute 





An element can't be shrinkwrapped if it is centered. 


Stretched Absolute 





HTML 


«hi»Center Aligned</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="example">Sized Static Block </div> 
«div id="ss" class="example">Stretched Static Block</div> 
<span id="za" class="example">Sized Absolute</span> 
<span id="wa">An element can't be shrinkwrapped if it is centered.</span> 
<span id="sa" class="example">Stretched Absolute</span></div></div> 


CSS 


*.gp { position:relative; height:295px; width:600px; border:2px solid black; } 
*.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
*.example { padding:5px; border:5px solid black; background-color: gold; } 
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#zs { position:static; text-align: center; margin-top: 5px; 
width: 400px; margin-left:auto; margin-right:auto; } 

#ss { position:static; text-align: center; margin-top: 5px; 
width: auto; margin-left: 70px; margin-right:70px; } 

#za { position:absolute; text-align: center; top:0; margin-top:155px; 
width: 67%; left:0; margin-left:auto; right:0; margin-right:auto; } 

"wa ( position:absolute; text-align:center; top:0; margin-top:200px; 
width:auto; left:0; margin-left:0; right:0; margin-right:0; } 

#sa { position:absolute; text-align:center; top:0; margin-top:245px; 





width:auto; left:0; margin-left:15%; right:0; margin-right:15%; } 
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Center Aligned 


Problem You want to align an element and its content to the horizontal center of its 


parent or closest positioned ancestor. 


Solution To center-align content, assign text-align: center to its containing block. 


To create a center-aligned sized element, you can use margin-left:auto; and 
margin-right:auto; and set width:+VALUE to size it. For absolute elements, you 
can also use right:0 and left:0 to align the element to the left and right sides. 


To create a center-aligned stretched element, set margin-left and margin-right 
to the same value. A larger value shrinks the element, and a smaller value grows 
it. For absolute stretched elements, you can also use left:0 and right:0. 


Patterns Center-aligned Sized Static Block 


Location 


Limitations 


Tips 


Related to 


See also 


BLOCK-SELECTOR { position:static; 
width:+VALUE; 


Center-aligned Stretched Static Block 
BLOCK-SELECTOR { position:static; 
width: auto; 


Center-aligned Sized Absolute Element 


SELECTOR { position:absolute; 
width:+VALUE; left:0; 
right:0; 


text-align:center; 
margin-left: auto; 
margin-right:auto;  j 


text-align:center; 
margin-left:-4VALUE; 
margin-right:+VALUE; } 


text-align:center; 
margin-left: auto; 
margin-right:auto;  j 


Center-aligned Stretched Absolute Element 


SELECTOR { position:absolute; 
width: auto; left:0; 
right:0; 


This pattern applies to all elements. 


text-align:center; 
margin-left: +VALUE; 
margin-right:+VALUE; } 


A horizontally shrinkwrapped element cannot be center aligned. 
Internet Explorer 6 cannot center absolute elements; version 7 can center 
stretched absolute elements, but still cannot center sized absolute elements. 


A center-aligned sized pattern keeps the width constant and grows the margins 
dynamically. A center-aligned stretched pattern grows the width dynamically 
and keeps the margins constant. You can use percentages for widths and 
margins. A percentage sizes the width or margin proportional to the width 


of the containing block. 


Left Aligned, Right Aligned, Center Offset; Static, Absolute (Chapter 7); Sized, 
Shrinkwrapped, Stretched (Chapter 5); Aligned design patterns in Chapter 8 


www.cssdesignpatterns.com/center-aligned 
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CHAPTER 9 ™ POSITIONING: ADVANCED 


Center Offset 


© Center Offset - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Center Offset 


Positioned Grandparent 





Non-positioned Parent 


A Sized Static Block can't be center offset. 


Stretched Static Block --> 40px 


Sized Absolute --> 40px 


An element can't be shrinkwrapped if it is centered. 


Stretched Absolute --> 40px 





HTML 


<h1>Center Offset</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<div id="zs" ><br />A sized static block can't be center offset.</div> 
«div id="ss" class="ex"><span>Stretched Static Block &rarr; 40px</span></div> 
<span id="za" class="ex"><span>Sized Absolute &rarr; 40px</span></span> 
<span id="wa" >An element can't be shrinkwrapped if it is centered.</span> 
<span id="sa" class="ex"><span>Stretched Absolute &rarr; 40px</span></span> 
</div></div> 


CSS 

*.gp ( position:relative; height:295px; width:600px; border:2px solid black; } 
* parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
*.ex { padding:5px; border:5px solid black; background-color:gold; } 
* 


.ex span ( margin-left:-40px; ] 


#zs ( position:static; text-align:center; margin-top:5px; 
width:auto; margin-left:90px; margin-right:10px; } 
#ss ( position:static; text-align:center; margin-top:5px; 
width:auto; margin-left:90px; margin-right:10px; } 
#za { position:absolute; text-align:center; top:0; margin-top:155px; 
width:440px; left:80px; margin-left:auto; right:0; margin-right:auto; } 
"wa { position:absolute; text-align:center; top:0; margin-top:200px; 
width:auto; left:0; margin-left:110px; right:0; margin-right:30px; } 
#sa { position:absolute; text-align:center; top:0; margin-top:245px; 


width:auto; left:0; margin-left:110px; right:0; margin-right:30px; } 


CHAPTER 9 | POSITIONING: ADVANCED 


Center Offset 


Problem 


Solution 


Patterns 


Location 
Limitations 


Example 


Related to 


See also 


You want to align an element and its content to the center of its parent or closest 
positioned ancestor and then offset it from the center. 


To create a center-offset inline element, you can use margin-left :+VALUE to 
offset the element to the right and margin-left: -VALUE to offset it to the left. 
Also assign text-align:center to the containing block element. 


To create a center-offset sized absolute element, you can use a positive value in 
left to offset to the right, and a negative value to offset to the left. You can also 
assign the following to the element: margin-left:auto;,margin-right:auto;, and 
right:0;, and set width: «VALUE to size the element. 


To create a center-offset stretched element, set nargin-left and margin-right to 
the same value. A larger value shrinks the element, and a smaller value grows it. 
To offset it to the left, subtract the desired offset from margin-left and add it to 
margin-right. To offset it to the right, add the desired offset to margin-left and 
subtract it from margin-right. For absolute stretched elements, you can also use 
left:0 and right:0. 


A sized static block element cannot be center offset. 
A shrinkwrapped absolute element cannot be center offset. 


Center-offset Inline Element 
INLINE-SELECTOR { margin-left:+VALUE; } 
BLOCK-SELECTOR { text-align:center; } 


Center-offset Stretched Static Block 
BLOCK-SELECTOR { position:static; text-align:center; 
width: auto; margin-left: +VALUE; 
margin-right:+VALUE; } 


Center-offset Sized Absolute Element 


SELECTOR { position:absolute; text-align:center; 
width:+VALUE;  left:4VALUE; margin-left:auto; 
right:0; margin-right:0; } 
Center-offset Stretched Absolute Element 
SELECTOR { position:absolute; text-align:center; 
width: auto; left:0; margin-left: +VALUE; 
right:0; margin-right:+VALUE; } 


This pattern applies to all elements. 
Same as Center Aligned. 


Notice how each block is centered and then offset to the right by 80 pixels. 
Also notice how the text in each block is centered and then offset to the left by 
40 pixels. 


Left Offset, Right Offset, Center Aligned; Static, Absolute (Chapter 7); Sized, 
Shrinkwrapped, Stretched (Chapter 5); Offset and Aligned design patterns in 
Chapter 8 


www. cssdesignpatterns.com/center-offset 
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Top Aligned 


© Top Aligned - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 
Top Aligned 

Positioned Grandparent Sized || Shrinkwrapped fl Stretched 
Non-positioned Parent Absolute Absolute Absolute 


Sized Static 
Block 








Shrinkwrapped 
Static Block 








HTML 


<h1>Top Aligned</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="ex"><span>Sized Static Block</span></div> 
«div id="ws" class="ex"><span>Shrinkwrapped Static Block</span></div> 
<span id="za" class="ex"><span>Sized Absolute</span></span> 
«div id="wa" class="ex"><span>Shrinkwrapped Absolute</span></div> 
<span id="sa" class="ex"><span>Stretched Absolute</span></span></div></div> 


CSS 


*.gp { position:relative; height:300px; width:700px; border:2px solid black; } 

* parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 

*.ex { padding:5px; border:5px solid black; background-color:gold; 
width:120px; text-align:center; position:relative; } 

*.ex span { left:0; width:130px; height:auto; } 


#zs { height:100px; margin-top:0; margin-bottom: auto; 
position:static; } 
#ws { height:auto; margin-top:0; margin-bottom: auto; 
position:static; } 
#za { height:100px; top:0; margin-top:0; bottom:auto; margin-bottom:auto; 
position: absolute; margin-left:200px; } 
#wa { height:auto; top:0; margin-top:0; bottom:auto; margin-bottom: auto; 
position: absolute; margin-left:355px; } 
#sa { height:auto; top:0; margin-top:0; bottom:0; margin-bottom:0; 


position: absolute; margin-left:510px; } 


CHAPTER 9 | POSITIONING: ADVANCED 


Top Aligned 


Problem 


Solution 


Patterns 


Location 


Limitations 


Tip 


Related to 


See also 


You want to align an element and its content to the top of its parent or closest 
positioned ancestor. 


To create a top-aligned sized element, you can use height: *VALUE to size it. You 
can use margin-top:0 to align it to the top. You can use margin-bottom:auto to 
prevent it from aligning to the bottom. For an absolute element, you can also use 
top:0 to align the element to the top and bottom:auto to prevent it from aligning 
to the bottom. 


To create a top-aligned shrinkwrapped element, you can use height: auto, 
bottom:auto, and margin-bottom:auto to shrinkwrap the height. You can use 
top:0 and margin-top:0 to align it to the top. 


To create a top-aligned stretched element, you can use height: auto, 
margin-top:0, and margin-bottom:0 to stretch its height to the top and bottom of 
its container. For an absolute element, you can also use top:0 and bottom:0 to 
stretch it to the top and bottom. 


Top-aligned Sized Static Block 
BLOCK-SELECTOR ( position:static; 
margin-top:0; 


Top-aligned Shrinkwrapped Static Block 
BLOCK-SELECTOR ( position:static; 
margin-top:0; 


height :+VALUE ; 
margin-bottom:auto; } 


height: auto; 
margin-bottom:0; } 


Top-aligned Sized Absolute Element 
SELECTOR { position:absolute; 
margin-top:0; 
top:0; 


Top-aligned Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; height: auto; 
margin-top:0; margin-bottom: auto; 
top:0; bottom:auto; ) 


height :+VALUE ; 
margin-bottom: auto; 
bottom:auto; ) 


Top-aligned Stretched Absolute Element 
SELECTOR { position:absolute; 
margin-top:0; 
top:0; 


height: auto; 
margin-bottom:0; 
bottom:0; } 








This pattern applies to all elements. 


Stretched Absolute does not work in Internet Explorer 6, but it does work in 
version 7. 


A browser renders blocks and content starting at the top of their containers and 
flows them down. This automatically aligns the first item to the top of its 
container and the top of the next item to the bottom of the previous item. 


Top Offset, Bottom Aligned, Middle Aligned; Static, Absolute (Chapter 7); Sized, 
Shrinkwrapped, Stretched (Chapter 5) 


www. cssdesignpatterns.com/top-aligned 
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Top Offset 


© Top Offset - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Top Offset 





Non-positioned Parent 


Sized Static Sized Shrinkwrapped Stretched 
Block Absolute Absolute Absolute 


Shrinkwrapped 
Static Block 








HTML 


<h1>Top Offset</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
<div id="zs" class="ex"><span>Sized Static Block</span></div> 
«div id="ws" class="ex"><span>Shrinkwrapped Static Block</span></div> 
<span id="za" class="ex"><span>Sized Absolute</span></span> 
«div id="wa" class="ex"><span>Shrinkwrapped Absolute</span></div> 
<span id="sa" class="ex"><span>Stretched Absolute</span></span></div></div> 


F 

= 

a CSS 

= 

E *.gp ( position:relative; height:300px; width:700px; border:2px solid black; j 
S *.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; } 
EZ *.ex { padding:5px; border:5px solid black; background-color:gold; 

e width:120px; text-align:center; position:relative; } 


*.ex span { left:0; width:130px; height:auto; } 





#zs { height:100px; margin-top: 25px; margin-bottom:0; 
position:static; } 
#ws { height:auto; margin-top: -70px; margin-bottom:0; 
position:static; background-color:yellow; } 
#za { height:100px; top:0; margin-top:70px; bottom:auto; margin-bottom: auto; 
position: absolute; margin-left:200px; } 
#wa { height:auto; top:0; margin-top:70px; bottom:auto; margin-bottom:0; 
position: absolute; margin-left:355px; } 
#sa { height:auto; top:0; margin-top:70px; bottom:0; margin-bottom:0; 


position: absolute; margin-left:510px; } 


CHAPTER 9 | POSITIONING: ADVANCED 


Top Offset 


Problem 


Solution 


Patterns 


Location 


Limitations 
Example 


Related to 
See also 


You want to offset an element and its content from the top of its parent or closest 
positioned ancestor. 


To offset a top-aligned element from the top, you can assign a value other than 
zero to margin-top. A positive value in margin-top offsets down (toward the 
inside), and a negative value offsets up (toward the outside). 


This design pattern is symmetrical to the Bottom Offset pattern except content 
inside bottom-offset elements cannot be automatically aligned to the bottom. 


See the Top Aligned design pattern for details on how to top-align an element. 


Top-offset Sized Static Block 
BLOCK-SELECTOR { position:static; height :+VALUE ; 


margin-top: VALUE; margin-bottom:auto; } 
Top-offset Shrinkwrapped Static Block 
BLOCK-SELECTOR { position:static; height: auto; 
margin-top: VALUE; margin-bottom:0; } 
Top-offset Sized Absolute Element 
SELECTOR { position:absolute; height :+VALUE ; 
margin-top: VALUE; margin-bottom: auto; 
top:0; bottom:auto; } 
Top-offset Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; height: auto; 
margin-top: +VALUE; margin-bottom: auto; 
top:0; bottom:auto; ) 
Top-offset Stretched Absolute Element 
SELECTOR ( position:absolute; height:auto; 
margin-top: VALUE; margin-bottom:0; 
top:0; bottom:0; } 





This pattern applies to all elements. 


Stretched Absolute does not work in Internet Explorer 6, but it does work in 
version 7. 


The shrinkwrapped static block has a negative top margin that moves it up and 
over the previous sized static block. 


Top Aligned, Bottom Offset, Middle Offset 


www. cssdesignpatterns.com/top-offset 
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Bottom Aligned 


© Bottom Aligned - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Bottom Aligned 


Positioned Grandparent 





Non-positioned Parent 


Sized Static 
Block 





Shrinkwrapped 
Static Block 








Shrinkwrapped Stretched 
Sized Absolute Absolute Absolute 





HTML 


«hi»Bottom Aligned</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="ex"><span>Sized Static Block</span></div> 
«div id="ws" class="ex"><span>Shrinkwrapped Static Block</span></div> 
<span id="za" class="ex"><span>Sized Absolute</span></span> 
«div id="wa" class="ex"><span>Shrinkwrapped Absolute</span></div> 
<span id="sa" class="ex"><span>Stretched Absolute</span></span></div></div> 


CSS 


*.gp { position:relative; height:300px; width:700px; border:2px solid black; } 

*.parent 1 margin:10px; padding:10px; padding-top:0; border:1px solid black; } 

*.ex { padding:5px; border:5px solid black; background-color:gold; 
width:120px; text-align:center; position:relative; } 

*.ex span ( height:auto; left:0; width:130px; } 


span.ex span (position:absolute;top:auto;margin-top:auto;bottom:0;margin-bottom:0; 
#zs ( height:100px; margin-top: auto; margin-bottom:0; 

position:static; margin-left: 0px; 
#ws { height: auto; margin-top: auto; margin-bottom:0; 


position:static; 
#za { height:100px; top:auto; margin-top:auto; bottom:0; margin-bottom:0; 


position: absolute; margin-left: 200px; 
#wa { height:auto; top:auto; margin-top:auto; bottom:0; margin-bottom:0; 
position: absolute; margin-left: 355px; 


#sa ( height:auto; top:0; margin-top:0; bottom:0; margin-bottom:0; 
position: absolute; margin-left:510px; 


} 
} 
} 
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Bottom Aligned 











Problem You want to align an element and its content to the bottom of its parent or 
closest positioned ancestor. 
Solution This design pattern is symmetrical to Top Aligned except that it applies this 
pattern twice: once to the element and once to the element's content. 
To create a bottom-aligned sized element, you can use height: VALUE to 
size it. You can use margin-bottom:0 to align it to the bottom. You can use 
margin-top:auto to prevent it from aligning to the top. For an absolute element, 
you can also use bottom:0 to align the element to the bottom and top:auto to 
prevent it from aligning to the top. 
You cannot bottom-align a static shrinkwrapped element because normal flow 
determines its position. 
To create a bottom-aligned shrinkwrapped absolute element, you can use 
bottom:0 and margin-bottom:0 to align it to the bottom. You can use height:auto, 
top:auto, and margin-top:auto to shrinkwrap the height. 
To create a bottom-aligned stretched element, you can use height:auto, 
margin-bottom:0, and margin-top:0 to stretch its height to the bottom and top of 
its container. For an absolute element, you can also use bottom:0 and top:0 to 
stretch it. 
Patterns Bottom-aligned Sized Static Block 
BLOCK-SELECTOR ( position:static; height :+VALUE ; 
margin-top: auto; margin-bottom:0; 
Bottom-aligned Sized Absolute Element 
SELECTOR { position:absolute; height :+VALUE ; 
margin-top: auto; margin-bottom:0; 
top:auto; bottom:0; 
Bottom-aligned Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; height: auto; 
margin-top: auto; margin-bottom:0; 
top:auto; bottom:0; 
Bottom-aligned Stretched Absolute Element & 
SELECTOR ( position:absolute; height:auto; 5 
margin-top:0; margin-bottom:0; = 
top:0; bottom:0; E 
Location This pattern applies to all elements. S 
Limitations Stretched Absolute does not work in Internet Explorer 6, but it does work in 2 
version 7. Bg 
Tip There is no property to align content to the bottom of its container. Instead, you 
need to use this design pattern to align content to the bottom of its parent. See 
the absolutely positioned spans in the example. Note that when a parent is 
shrinkwrapped, positioning its content collapses its height. 
Related to Top Aligned, Bottom Offset, Middle Aligned; Static, Absolute (Chapter 7); Sized, 
Shrinkwrapped, Stretched (Chapter 5) 
See also WwWw.Ccssdesignpatterns.com/bottom-aligned 
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Bottom Offset 


© Bottom Offset - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Bottom Offset 


Positioned Grandparent 





Non-positioned Parent 


Sized Static 
Block 
Shrinkwrapped 
Static Block 


Shrinkwrapped Stretched 
Sized Absolute Absolute Absolute 








HTML 


«hi»Bottom Offset</h1> 
<div class="gp">Positioned Grandparent 
<div class="parent">Non-positioned Parent 
«div id="zs" class="ex"><span>Sized Static Block</span></div> 
«div id="ws" class="ex"><span>Shrinkwrapped Static Block</span></div> 
<span id="za" class="ex"><span>Sized Absolute</span></span> 
«div id="wa" class="ex"><span>Shrinkwrapped Absolute</span></div> 
<span id="sa" class="ex"><span>Stretched Absolute</span></span></div></div> 


CSS 


*.gp { position:relative; height:300px; width:700px; border:2px solid black; } 

*.parent 1 margin:10px; padding:10px; padding-top:0; border:1px solid black; } 

*.ex { padding:5px; border:5px solid black; background-color:gold; 
width:120px; text-align:center; position:relative; } 

*.ex span ( height:auto; left:0; width:130px; } 

span.ex span(position:absolute;top:auto;margin-top:auto;bottom:5px;margin-bottom:0;) 
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#zs { height:100px; margin-top: auto; margin-bottom: -70px; 
position:static; } 
#ws { height:auto; margin-top: auto; margin-bottom: 120px; 
position: static; background-color:yellow; } 
#za { height:100px; top:auto; margin-top:auto; bottom:0; margin-bottom: 50px; 
position: absolute; margin-left:200px; } 
#wa ( height:auto; top:auto; margin-top:auto; bottom:0; margin-bottom: 50px; 
position: absolute; margin-left:355px; } 


#sa { height:auto; top:0; margin-top:auto; bottom:0; margin-bottom: 50px; 
position: absolute; margin-left:510px; } 
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Bottom Offset 


Problem 


Solution 


Patterns 


Location 


Limitations 


Tip 


Example 


Related to 
See also 


You want to offset an element and its content from the bottom of its parent or 
closest positioned ancestor. 


To offset a bottom-aligned element from the bottom, you can assign a value 
other than zero to margin-bottom. A positive value in margin-bottom offsets up 
(toward the inside), and a negative value offsets down (toward the outside). 


This design pattern is symmetrical to Top Offset except that it applies this 
pattern twice: once to the element and once to the element's content. 


See the Bottom Aligned design pattern for details on how to top-align an 
element. 


Bottom-offset Sized Static Block 


BLOCK-SELECTOR { position:static; height :+VALUE ; 
margin-top: auto; margin-bottom:+VALUE; } 
Bottom-offset Sized Absolute Element 
SELECTOR { position:absolute; height :+VALUE ; 
margin-top: auto; margin-bottom: +VALUE; 
top:auto; bottom:0; } 
Bottom-offset Shrinkwrapped Absolute Element 
SELECTOR { position:absolute; height: auto; 
margin-top:auto; margin-bottom: +VALUE ; 
top:auto; bottom:0; } 
Bottom-offset Stretched Absolute Element 
SELECTOR { position:absolute; height: auto; 
margin-top:0; margin-bottom: VALUE; 
top:0; bottom:0; } 





This pattern applies to all elements. 


Stretched Absolute does not work in Internet Explorer 6, but it does work in 
version 7. 


There is no property to align content to the bottom of its container. Instead, you 
need to apply this design pattern to the content to align it to the bottom of its 
parent. See the absolutely positioned spans in the example. Note that when a 
parent is shrinkwrapped, positioning its content collapses its height. 


The sized static block has a negative bottom margin that moves the 
shrinkwrapped static block up and over it. The shrinkwrapped static block has 
a large bottom margin that lowers the bottom of its parent. Notice how the 
example applies this pattern to the sized and stretched absolute elements and 
to the spans within them. 


Top Offset, Bottom Aligned, Middle Offset 


www.cssdesignpatterns.com/bottom-offset 
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Middle Aligned 


© Middle Aligned - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Middle Aligned 


i middle-align a | 
istatic element | Stretched 
: ora | Absolute 
i shrinkwrapped | 
i element. | 


INLINE Sized Absolute 





HTML 


«hi»Middle Aligned</h1> 

«div class="gp"> 

«div id="ia" class="ex1 ex2">INLINE</div> 

<div id="za" class="ex1 ex2"><span>Sized Absolute</span></div> 

<div id="wa" class="ex1">Can't middle-align a static element 
or a shrinkwrapped element.</div> 


a <div id="sa" class="ex1 ex2"><span>Stretched Absolute</span></div></div> 

= 

Z 

ö CSS 

z 

= 

2 *.gp { position:relative; height:300px; width:700px; border:2px solid black; } 

3 *.ex1 ( width:120px; padding:5px; text-align:center; border:1px dotted black; } 
*.ex2 { position:relative; border:5px solid black; background-color:gold; left:0; } 
* 


.ex1 span { height:36px; left:0; width:130px; 
position:absolute; top:0; margin-top:auto; bottom:0; margin-bottom:auto;  ) 





#ia  ( height:100px; top:0; margin-top:auto; bottom:0; margin-bottom:auto; 


position:absolute; 


#za  ( height:100px; top: 


position:absolute; 


#wa — ( height:auto; top: 


position:absolute; 


#sa { height:auto; top: 


position:absolute; 


line-height:100px; 





argin-left:40px; } 


; margin-top:auto; bottom:0; margin-bottom:auto; 


argin-left:200px; } 


; margin-top:90px; bottom:0; margin-bottom:90px; 


argin-left:355px; } 


; margin-top:90px; bottom:0; margin-bottom:90px; 





argin-left:510px; } 


CHAPTER 9 | POSITIONING: ADVANCED 


Middle Aligned 


Problem 


Solution 


Patterns 


Location 


Limitations 


Tip 


Example 


Related to 


See also 


You want to align an element and its content to the vertical middle of its closest 
positioned ancestor. 


To create a middle-aligned inline element, assign line-height :+VALUE to the 
same measurement or percentage assigned to the height of its parent. This 
pattern requires the element's parent to be sized. 


To create a middle-aligned sized absolute element, set height to size it. You can 
use top:0 and bottom:0 to align the element to the top and bottom. You can use 
margin-top:auto and margin-bottom:auto to realign the element to the middle. 


To create a middle-aligned stretched absolute element, set nargin-top and 
margin-bottom to the same value. A larger value shrinks the element, and a 
smaller value grows it. A negative value expands the element beyond the height 
of its container. You can use top:0 and bottom:0 to align the element to the top 
and bottom. 


A static element cannot be middle aligned. 
A shrinkwrapped element cannot be middle aligned. 


Middle-aligned Inline Element 
SELECTOR { line-height:+VALUE; } 


Middle-aligned Sized Absolute Element 


SELECTOR { position:absolute; height :+VALUE ; 
margin-top: auto; margin-bottom:0; 
top:0; bottom:0; } 
Middle-aligned Stretched Absolute Element 
SELECTOR { position:absolute; height: auto; 
margin-top:+VALUE ; margin-bottom: +VALUE; 
top:0; bottom:0; } 


This pattern works only on absolute elements. 


Internet Explorer 6 cannot middle-align absolute elements. Version 7 can 
middle-align stretched absolute elements, but not sized absolute elements. 


There is no text-align property to align content to the middle. Instead, you need 
to wrap content in an inline element, absolutely position it, and align it to the 
middle. This technique only works with elements that are inside stretched or 
sized absolute elements. 


In the example, this pattern aligns the content in each division to the middle of 
its parent division. The inline content is middle aligned. The <span> elements are 
middle aligned. The divisions are middle aligned. 


Center Offset, Top Aligned, Bottom Aligned; Static, Absolute (Chapter 7); Sized, 
Shrinkwrapped, Stretched (Chapter 5) 


www. cssdesignpatterns.com/middle-aligned 
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Middle Offset 


© Middle Offset - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Middle Offset 


; middle-offset | 

Sized Absolute] | astatic | Stretched 
| element ora | Absolute 
_ shrinkwrapped : 
i element. | 


INLINE 





HTML 


<hi>Middle Offset</h1> 
<div class="gp"> 


<div id="ia" class="ex1 ex2">INLINE</div> 
«div id="za" class="ex1 ex2"»«span»Sized Absolute</span></div> 
«div id="wa" class-"exi"»Can't middle-offset a static element 
or a shrinkwrapped element.</div> 
<div id="sa" class="ex1 ex2"><span>Stretched Absolute</span></div></div> 


a 

E: 

E 

< CSS 

Z 

Z *.gp { position:relative; height:300px; width:700px; border:2px solid black; } 
7 *.ex1 { width:120px; padding:5px; text-align:center; border:1px dotted black; } 
e *.ex2 ( position:relative; border:5px solid black; background-color:gold; left:0; } 

* 


.ex1 span ( height:36px; left:0; width:130px; 
position:absolute; top:0; margin-top:auto; bottom:0; margin-bottom:auto; } 





aia { height:100px; top:60px; margin-top:auto; bottom:-60px; margin-bottom:auto; 
position:absolute; line-height:100px; margin-left:40px; jJ 
"za { height:100px; top:60px; margin-top:auto; bottom:-60px; margin-bottom:auto; 
position:absolute; argin-left:200px; } 
"wa { height:auto; top:0; margin-top:150px; bottom:0; margin-bottom:30px; 
position:absolute; argin-left:355px; } 
isa { height:auto; top:0; margin-top:150px; bottom:0; margin-bottom:30px; 
position:absolute; argin-left:510px; } 





CHAPTER 9 | POSITIONING: ADVANCED 


Middle Offset 


Problem 


Solution 


Patterns 


Location 


Limitations 


Example 


Related to 


See also 


You want to align an element and its content to an offset from the vertical middle 
of its closest positioned ancestor. 


To create a middle-offset sized absolute element, you can use the Middle- 
aligned Sized Absolute Element pattern and set top to the desired offset and 
set bottom to the inverse of the desired offset. 


To create a middle-offset stretched absolute element, you can use the Middle- 
aligned Stretched Absolute Element pattern and add the desired offset to 
margin-top and subtract the desired offset from margin-bottom. 


An inline element cannot be middle-offset. 

A static element cannot be middle-offset. 

A shrinkwrapped element cannot be middle-offset. 
Middle-offset Sized Absolute Element 


SELECTOR { position:absolute; height :+VALUE; 
margin-top: auto; margin-bottom:0; 
top:+VALUE ; bottom:+VALUE; } 


where top = top + OFFSET and bottom = bottom - OFFSET 
Middle- offset Stretched Absolute Element 


SELECTOR { position:absolute; height: auto; 
margin-top:+VALUE ; margin-bottom: +VALUE; 
top:0; bottom:0; } 
where margin-top = margin-top + OFFSET 


and margin-bottom = margin-bottom- OFFSET 
This pattern works only on absolute elements. 


Internet Explorer 6 cannot middle-align absolute elements. Version 7 can 
middle-align stretched absolute elements, but not sized absolute elements. 


This example is the same as the middle-aligned example, except it is offset by 

60 pixels. The first two divisions are sized absolute elements. I offset them from 
the middle by setting top to an offset of 60 pixels and bottom to the inverse offset 
of —60 pixels. The last two divisions are stretched absolute elements. I vertically 
centered them by assigning them to a margin-top and margin-bottom of 90 pixels. 
Ithen offset them from the middle by adding 60 pixels to margin-top to create a 
value of 150px, and subtracting 60 pixels from margin-bottom to create a value 

of 30px. 


Center Offset, Top Aligned, Bottom Aligned; Static, Absolute (Chapter 7); Sized, 
Shrinkwrapped, Stretched (Chapter 5) 


www.cssdesignpatterns.com/middle-offset 
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CHAPTER 10 


Styling Text 


This chapter is the first of three chapters containing design patterns that style text. The next 
chapter discusses how to put space around text. Chapter 12 discusses how to align text. 
Strictly speaking, this is the only chapter that actually styles text. The following two chapters 
style inline elements, which can contain text or be replaced by images, objects, controls, 
movies, and so on. 

This chapter contains the following design patterns: 


Font shows how to style text using fonts. 
Highlight shows how to highlight text using color and tiled background images. 


Text Decoration shows how to create custom styles for underlines, overlines, and 
line-throughs. 


Text Shadow shows how to automatically generate shadows behind text in Internet 
Explorer 6 and Safari. 


Text Replacement shows how to replace text with an image. The text is readable by 
screen readers and degrades nicely when the image is unavailable. This is an essential 
tool for making sites beautiful and accessible. 


Invisible Text shows how to hide text without adding markup. It is not as useful as Text 
Replacement, but requires no additional markup. 


Screenreader-only shows how to make text readable by screen readers while com- 
pletely hiding it from sighted users. This is an essential tool for making sites accessible 
for nonsighted users, while keeping them uncluttered for sighted users. 
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200 CHAPTER 10 ™ STYLING TEXT 


Font 


© Font - Mozilla Firefox 


File 


Edit View Go Bookmarks Tools Help 


Font 


font-family: sans serif serif monospace 


font-size: small medium large 


color: black 

font-style: normal italic 

font-weight: normal bold 

font-variant: normal SMALLCAPS 

text-transform: none lowercase UPPERCASE Capitalize 





HTML 


«hi 


«p» 
«s 


«p» 
«s 


«p» 
<S 
<p> 
<S 
<p> 
<S 
<p> 
<s 
<p> 
«S 
«s 


.trans3 { text-transform:uppercase; } 


»Font«/h1» 


«code»font-family:«/code»«span class="family1" »sans serif</span> 
pan class-"family2"»serif«/span» «span class-"family3" »monospace«/span»«/p» 


«code»font-size:«/code»«span class="size1">small</span> 
pan class-"size2"»medium«/span»«span class-"size3"»large«/span»«/p» 


«code»color:«/code»«span class-"colori"»black«/span» 

pan class-"color2"»gold«/span»«/p» 
«code»font-style:«/code»«span class="style1">normal</span> 

pan class="style2">italic</span></p> 
«code»font-weight:«/code»«span class="weight1">normal</span> 
pan class-"weight2"»bold«/span»«/p» 
«code»font-variant:«/code»«span class-"varianti"»normal«/span» 
pan class="variant2">smallcaps</span></p> 
<code>text-transform:</code><span class-"transi"»none«/span» 
pan class-"trans2"»lowercase«/span»«span class-"trans3"»uppercase«/span» 
pan class="trans4">capitalize</span></p> 





CSS 

*.familyi ( font-family:sans-serif; ] *.family2 ( font-family:serif; } 
*.family3 ( font-family:monospace; } 

*.size1 { font-size:small; } *.size2 ( font-size:medium; ) 

*.size3 ( font-size:large; } 

*.stylei { font-style:normal; } *.style2 ( font-style:italic; } 
*.weighti ( font-weight:normal; } *.weight2 ( font-weight:bold; } 

* variantı { font-variant:normal; } *.variant2 { font-variant:small-caps; } 
*.colori { color:black; } *.color2 { color:gold; } 

*.transi { text-transform:none; } *.trans2 { text-transform: lowercase; } 
* * 


.trans4 { text-transform:capitalize; } 


Font 


Problem 


Solution 


Pattern 


Location 


Tip 


Related to 


See also 


CHAPTER 10 ™ STYLING TEXT 


You want to style text using a font and various font attributes. 


What we call a "font" is actually a set of fonts designed to work together to create 
normal, bold, italic, and small-cap effects. CSS calls this a "font family." When 
you set font properties, the browser and the operating system choose a font from 
the font family that most closely matches your request. If your requested font is 
unavailable, such as a small-cap serif font, the operating system chooses the 
closest font and simulates the requested font. 


A font has two other important attributes: color and case. A font can be rendered 
in any color, but some fonts cannot render certain cases. For example, some 
fonts have only uppercase characters, and most fonts do not have small-cap 
characters, which are small uppercase characters. 


CSS has seven properties that style the font in which text is rendered. 


- You can use font - family to direct the browser to select a font from a comma- 
delimited list of fonts. If a browser cannot find your first choice, it attempts to 
find your second choice, and so forth. The last font in the list should be one of 
the standard font-name constants: sans-serif, serif, or monospace. You should 
place font names in quotes when it contains spaces. 


- You can use font-size to size a font. You can use ems or a percentage when you 
want a size relative to the font size of an element's parent. You can use one of the 
built-in constants such as xx- small, x- small, small, medium, large, x-large, or 
xx- large. You can use pixels when you want a specific size, but you cannot count 
on this size in your layouts because a browser increases or decreases font sizes 
when zooming in or out for a user. Also be aware that Internet Explorer 6 cannot 
enlarge fixed-size fonts when zooming in, which causes accessibility problems. 


- You can use color to set the color of the font, which should contrast with the 
background-color; otherwise, text will be hard to read or invisible. You can use 
font-style:italic to make the text italic. You can use font-weight:bold to make 
the text bold. You can use text-transform to change the text's case to lowercase, 
uppercase, or capitalize.You can use font-variant:smallcaps to render the text 
in small caps. You can simulate small caps by shrinking the font size to 0.8em and 
using text-transform:uppercase. 


SELECTOR ( font-family:FONT,FONT,etc; 
color:COLOR; 
font-size:+VALUE; 
font-style:NORMAL_ITALIC; 
font-weight :NORMAL_BOLD; 
font-variant:NORMAL SMALLCAPS; 
font-transform:LOWERCASE UPPERCASE CAPITALIZE; } 


This pattern applies to any type of element. 


Since font-size is inherited, you can assign font-size:smallto «body» and use 
percents or ems to scale the font-size as needed. 


Inline Decoration (Chapter 11); Vertical-aligned Content, Subscript and 
Superscript, Nested Alignment (Chapter 12); Dropcap design patterns 
(Chapter 18) 


www. cssdesignpatterns .com/font 
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CHAPTER 10 ™ STYLING TEXT 


Highlight 


o Highlight - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Highlight 


You can insert a highlight in any inline context. fialfe]elHfs Tli: E 


eism Irc A highlight is a Reas Eleg and a [1-19 «189: 11:0 oe) (og 


applied to an inline element. around a highlight can improve its 


visual appeal. You can increase the line height to make room for extra 


padding. 





HTML 


«p»You can insert a 


«span class-"highlight black-on-gold"»highlight«/span» 

in any inline context. 

«span class-"highlight white-on-firebrick"»Highlights can span multiple 
lines.«/span» A highlight is a 

«span class-"highlight"»foreground color«/span» and a 

«span class-"highlight cyan-on-royalblue"»background color«/span» 
applied to an inline element. 

«span class-"highlight palegreen-on-darkgreen"»Padding«/span» 

around a highlight can improve its visual appeal. You can increase the 
«span class-"highlight textured"»line height«/span» 

to make room for extra padding. 


</p> 


CSS 


p 


* 


* + X * X 


( margin-top:20px; letter-spacing:0.5px; line-height:1.9em; } 


.highlight ( color:white; background-color:black; 


padding-left:0.25em; padding-right:0.25em; 
padding-top:0.05em; padding-bottom:0.13em; 
background-image:none; ) 


.black-on-gold ( color:black; background-color:gold; j 
.white-on-firebrick { color:white; background-color:firebrick; ] 
.cyan-on-royalblue ( color:lightcyan; background-color:royalblue; } 
.palegreen-on-darkgreen ( color:palegreen; background-color:darkgreen; } 
.textured ( color:black; background-color:white; 


background-image:url("paper.jpg"); } 
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Highlight 


Problem You want to highlight text with a background color and a forecolor. You 
optionally want to highlight text with a background image. 


Solution A highlight is colored text superimposed on a contrasting background color or 
tiled image. To create a highlight, apply the following styles: 


- Use color to set the foreground color of the text. 

- Use background-color to set the background color of the text. 

- Use padding-left:+VALUE to set the padding distance on the left side. 

- Use padding-right :+VALUE to set the padding distance on the right side. 
- Use padding-top: *VALUE to set the padding distance on the top. 

- Use padding-bottom:+VALUE to set the padding distance on the bottom. 


- Use background-image to use a tiled image as the highlight. This can be omitted 
or set to none if you do not want to use a background image. 


- Use background-position to set the location of the highlight. This can be 
omitted if the default value of left top is what you want. 


- Use background-repeat: repeat to tile the image. This can be omitted because it 
is the default value. 


Pattern INLINE-SELECTOR { color:COLOR; background-color:COLOR; 
padding-left:+VALUE; padding-right:+VALUE; 
padding-top:+VALUE; padding-bottom:+VALUE; 
background-image:url("FILE.EXT"); } 


BLOCK-SELECTOR { line-height:+VALUE; } 
Location This pattern applies to any type of element. 


Tips You can use em measurements to scale the padding to match the size of the font. 
I find that 0.25em on the left and right, 0.05em on the top, and 0.13em on the 
bottom creates a well-proportioned box around text of all sizes. 


A browser does not expand the height of a line to fit the vertical padding of its 
content. Thus, vertical padding overlaps content in neighboring lines unless you 
increase the height of a line using line-height. 


Use contrasting colors for color and background-color to ensure the text is 
readable. When using background images, be sure to assign contrasting 
background and foreground colors in case the browser cannot load the 
background image. 


Example In the example, I named classes descriptively to make it easier to match the code 
to the screenshot. In a real document, I would name classes functionally because 
it makes it easier to restyle the document later. For example, the class “highlight 
white-on-firebrick" is better named "highlight-alert." Functional classes enhance 
the meaning of a document and do not require changes to the HTML markup 
when you change style rules. 


Related to Background (Chapter 6) 


See also www.cssdesignpatterns.com/highlight 
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CHAPTER 10 — STYLING TEXT 


Text Decoration 


© Text Decoration - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Text Decoration 


text-decoration: underline overline lLine-threugh 


border: Under 4 Under 5 Under6 Over7 Over8 Over9 


t... 


background: Under 10 Underii Underi2 Overi3 Overi4 Fhru4s5 





HTML 

<h1>Text Decoration</h1> 

<p> 
<code>text-decoration: 
<span class="t1">underline</span> &nbsp;<span class="t2">overline</span> &nbsp; 
<span class="t3">line-through</span></code> 
«br /><br /»«code»border«/code»: 
«span class="t4">Under 4</span> &nbsp; «span class="t5">Under 5«/span» &nbsp; 
«span class-"t6"»Under 6«/span» &nbsp; «span class="t7">Over 7«/span» &nbsp; 


<S 


<b 
«s 
«s 
«s 
</p> 


CSS 


*.t1 
*ot3 


pan class="t8">Over 8«/span» &nbsp; «span class="t9">Over 9«/span» &nbsp; 


r /><br /><code>background</code>: 
pan class="t10">Under 10</span> &nbsp; <span class="t11">Under 11</span> &nbsp; 





pan class="t12">Under 12</span> &nbsp; <span class="t13">Over 13«/span» &nbsp; 
pan class="t14">Over 14</span> &nbsp; «span class="t15">Thru 15</span> &nbsp; 
{ text-decoration:underline; } *.t2 ( text-decoration:overline; } 

{ text-decoration: line-through; } 


*.t4 ( border-bottom:1px solid black; ) *.t5 { border-bottom:1px dotted black; } 


*.t6 
*.t8 


.t1 
.t1 
etl 
.t1 
.t1 
.t1 


+ * *¥ *¥ X X 


( border-bottom:2px dashed gray; } *.t7 { border-top:3px double red; } 
( border-top:4px groove blue; } *.t9 ( border-top:6px ridge green; } 


O ( background:repeat-x left bottom url("tight-dot.gif"); padding-bottom:Opx; } 
1 ( background:repeat-x left bottom url("dotted.gif"); padding-bottom:Opx; } 

2 ( background:repeat-x left bottom url("wavy-green.gif"); padding-bottom:2px; } 
3 ( background:repeat-x left top url("diamond-blue.gif"); padding-top:3px; } 

4 ( background:repeat-x left top url("gradient3.gif"); padding-top:2px; } 

5 { background:repeat-x left center url("wavy-red3.gif"); padding:5px; } 


CHAPTER 10 ™ STYLING TEXT 205 


Text Decoration 


Problem 


Solution 


Patterns 


Location 


Tip 


Related to 
See also 


You want to use a custom style for underlines, overlines, and line-throughs. 


You can use text-decoration to put a line under, over, or through text. The line's 
color is the text's color, and the browser determines its thickness. 


You can also use the border property to create an underline or an overline. 
- Use border to control the thickness, style, and color of the line. 


You can also use the background-image property to create an unlimited variety of 
underlines, overlines, and line-throughs. By tiling images, you can create any 
pattern in any thickness in multiple colors. 


- Use background-image to specify an image for the text decoration. 
- Use background-position to set the location of the text decoration. 
- Use background-repeat:repeat-x to tile the image horizontally. 


- Use padding-top or padding-bottom to insert vertical space between the text 
decoration and the text. 


Text Decoration 

INLINE-SELECTOR ( text-decoration:underline; } 
NLINE-SELECTOR { text-decoration:overline; } 
NLINE-SELECTOR ( text-decoration:line-through; } 


der Underline 
NLINE-SELECTOR { border-bottom:WIDTH STYLE COLOR; } 


der Overline 
INE-SELECTOR { border-top:WIDTH STYLE COLOR; } 


kground Underline 

NLINE-SELECTOR { background-repeat: repeat-x; 
background-position:left bottom; 
background-image:url("FILE.EXT"); 
padding-bottom:+VALUE; } 


Background Overline 

INLINE-SELECTOR { background-repeat: repeat-x; 
background-position:left top; 
background-image:url("FILE.EXT"); 
padding-top:+VALUE; j 


Background Line-through 

INLINE-SELECTOR { background-repeat:repeat-x; 
background-position:left center; 
background-image:url("FILE.EXT"); 
padding-bottom:+VALUE; } 


This pattern applies to inline elements. 


et e FEES 
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Transparent GIFs as background images integrate well with different background 
colors. 


Border, Background (Chapter 6) 


www. cssdesignpatterns.com/text-decoration 
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Text Shadow 


À Text Shadow - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 


Text Shadow 





Text Shadow applies to all text in a block. This design pattern does not apply 
to inline elements in Internet Explorer 6. This design pattern does not work 
in Opera 9, Firefox 2, and other Mozilla Browsers. 





HTML 


<h1 class="shadow">Text Shadow</h1> 


<p class="shadow">Text Shadow applies to all text in a block. 
This design pattern does not apply to inline elements in Internet Explorer 6. 
This design pattern does not work in Opera 9, Firefox 2, 
and other Mozilla Browsers</p> 


CSS All Browsers 


* shadow { text-shadow:#999999 5px 5px 5px; } 


CSS Internet Explorer 6 


* shadow { filter: shadow(color=#999999, direction-135, strength-4); zoom:1; } 
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CHAPTER 10 ™ STYLING TEXT 


Text Shadow 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 


Related to 
See also 


You want to place a shadow behind text. 


The Safari browser supports the CSS property text- shadow. Internet Explorer 6 
provides a proprietary property called filter:shadow, which will cause your CSS 
not to validate. You can use these two properties to create shadows in these 
browsers. Other browsers do not support text shadows. 


In Safari, use text-shadow to add a shadow to text. 

- COLOR is the color of the shadow. 

- X-OFFSET is the horizontal offset of the shadow. 

- Y-OFFSET is the vertical offset of the shadow. 

- DIFFUSION is the amount of blur. Greater values make greater blur. 
In Internet Explorer 6, use filter: shadow to add a shadow to text. 
- COLOR is the color of the shadow. 


- DIRECTION is the direction of the shadow: 0 - top, 45 - top right, 90 - right, 
135 = bottom right, 180 = bottom, 225 = bottom left, 270 = left, 315 = top left. 


- SIZE is the size of the shadow in pixels. 


- Use zoom: 1 to trigger the shadow effect in Internet Explorer. Internet Explorer 6 
requires a block to have layout before it will apply filter effects to it. zoom:1 
triggers layout. Layout is a proprietary feature specific to Internet Explorer. 
Layout is discussed in the Atomic design pattern in Chapter 7. 


SELECTOR ( text-shadow:COLOR X-OFFSET Y-OFFSET DIFFUSION; 
filter:shadow(color-COLOR, 
direction-DIRECTION, 
strength-SIZE); 
zoom:1; } 
This pattern applies to block elements. Specifically, text- shadow applies to all 
elements, and filter:shadow applies only to block elements. 


This pattern does not work in Firefox 2 or Opera 9. text- shadow works in 
Safari 1.2.4. filter:shadow works in Internet Explorer 6. 


I include this design pattern because it does not hurt to use text shadows when a 
browser does not support it. The shadow effect is nonessential. 


Avoid using shadows to create special effects (such as an eclipse) where color 
and background-color are the same, because this makes for invisible text in 
browsers that do not support shadows. 


If you assign a border to the shadowed block element, Internet Explorer 6 will 
put a shadow around the border and the text inside it. 


A shadow effect around text makes the text bolder and stand out from its 
background. Shadows work best for headings and for text overlaying background 
images. A subtle shadow enhances readability and a strong shadow makes text 
harder to read. 


Font 


www. cssdesignpatterns .com/text-shadow 
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CHAPTER 10 — STYLING TEXT 


Text Replacement 


Text Replacement - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Text Replacement 


Heading 2 


Example shown with text replaced by an image 





©) Text Replacement - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Text Replacement 


Heading 2 





Example shown when browser could not display the image 


HTML 


«hi»Text Replacement</h1> 


«h2 id="h2">Heading 2<span></span></h2> 


CSS 


#h2 { position:relative; width:250px; height:76px; padding:0; overflow:hidden; } 


#h2 span { position:absolute; width:250px; height:76px; left:0; top:0; margin:0; 
background-image:url("heading2.jpg"); background-repeat:no-repeat; } 
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Text Replacement 


Problem 


Solution 


Pattern 


Location 
Tip 
Related to 


See also 


You want to replace text with an image, and you want the text to be read by a 
screen reader. You also want the text to be visible when the image is unavailable. 


Insert an empty «span» into the block element that contains the text you want to 
replace with an image. Assign the image as the span's background image. 
Relatively position the block and absolutely position the span. This displays the 
span in front of the block. Size both the block and the span to fit the image. Since 
the block and the span are the same size and the span is in front of the block, the 
span's background image covers the text in the block. If the image is unavailable, 
the browser renders the span's background as transparent, and this lets the text 
show through. 


Assign a unique ID to the block containing the text you want to replace and style 
it as follows: 


- Use position:relative; to position the block—so the background image of the 
«span» can be positioned on top of the text. 


- Use width and height to size the block to fit the image. 
- Use padding:0; to remove padding that could allow text to show through. 


- Use overflow:hidden; to ensure long text does not show through, but be aware 
that if the image is not displayed, long text could be truncated. 


Insert an empty «span» into the block and style it as follows: 


- Use position:absolute;, left:0;, and top:0; to position the image over the 
text in the block. 


- Use width and height to size the «span» to fit the image. 

- Usemargin:0; to remove margins that could allow text to show through. 
- Use background-image:url("FILE.EXT") to load the image. 

- Use background-repeat:no-repeat to ensure the image does not repeat. 


HTML 
«BLOCK id-"UNIQUE-ID"» TEXT <span></span></BLOCK> 


CSS 

#UNIQUE-ID { position:relative; padding:0; overflow:hidden; 
width:IMAGE WIDTH; 
height:IMAGE HEIGHT; ) 


#UNIQUE-ID span { position:absolute; left:0; top:0; margin:0; 
width:IMAGE WIDTH; 
height:IMAGE HEIGHT; 
background-image:url("FILE.EXT"); 
background-repeat:no-repeat; } 


This pattern applies to any block, float, absolute, or fixed element. 
Text replacement works well with links and buttons that use rollover effects. 


Invisible Text, Screenreader-only; Background (Chapter 6); Marginal Graphic 
Dropcap (Chapter 18) 


www. cssdesignpatterns.com/text-replacement/ 
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CHAPTER 10 — STYLING TEXT 


Invisible Text 


©) Invisible Text - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Invisible Text 


o 





HTML 


<h1>Invisible Text</h1> 


<p class="invisible-text">Invisible Text</p> 


CSS 


*.invisible-text { 
text-indent:-9999px; 
text-align:left; 
width:75px; 
height:35px; 
background-image:url("go.jpg"); 
background-repeat:no-repeat; 
background-position:center center; } 
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Invisible Text 


Problem 


Solution 


Pattern 


Location 
Limitations 
Tip 


Related to 
See also 


You want to hide the text in a terminal block element without hiding the element 
itself. You do not want to insert any extra markup into the document. You want 
the text to be read by a screen reader. You want to set the height and width so you 
can display a background image instead of the text. 


You can use text-indent:-9999px to move the text off the screen so that it will 
not be visible. 


- You can use text-align:left to ensure the block does not inherit another value 
for text-align. This is important because text-indent works properly only when 
text is aligned to the left. 


- You can use width and height to size the element to display the background 
image. 


- You can use text-align to move the text to the left or right side—further out of 
the way of a background image. 


TERMINAL BLOCK SELECTOR { 
text-indent:-9999px; 
text-align:left; 
width:+VALUE; 
height :+VALUE ; 
background-image:url("FILE.EXT"); 
background- repeat : VALUE; 
background-position:H V; } 


This pattern applies to any terminal block element. 


This design pattern only works on terminal block elements, like the paragraph. It 
does not work on inline elements. If the browser cannot display the background 
image, the user does not see anything. 


If you can insert a tiny bit of extra markup, the Text Replacement design pattern 
is much better. 


Text Replacement; Text Indent, Hanging Indent (Chapter 12) 


www. cssdesignpatterns.com/invisible-text 
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Screenreader-only 


© Screenreader-only - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Screenreader-only 


Text before screenreader-only text. 


Text after screenreader-only text. 





HTML 


«hi»Screenreader-only«/h1» 
«p»Text before screenreader-only text.«/p» 


«p class="screenreader-only"> 
This text is hidden to sighted users, but is read by screen readers.«/p» 


«span class-"screenreader-only"» 
You can make any type of element a screenreader-only element.«/span» 


«p»Text after screenreader-only text.«/p» 


CSS 


*.screenreader-only ( 
position:absolute; 
left:-9999px; 
top:-9999px; 
width:1px; 
height:1px; 
overflow:hidden; } 
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Screenreader-only 


Problem 


Solution 


Pattern 


Location 


Tips 


Disadvantages 
Related to 


See also 


You want text to be read by a screenreader program, and you do not want 
sighted users to see the text. This design pattern is useful when you want to 
provide instructions to nonsighted users that you do not want to give to 
sighted users. 


Remove the element from the flow. Shrink the element to one pixel. Hide the 
text when it overflows its one pixel size. Move the element offscreen. 


- You can use position:absolute to remove the element from the flow. 


- You can use left:-9999px to move the element off the left side of the 
viewport. 


- You can use top: -9999px to move the element above the top of the viewport. 
- You can use width:1px to shrink the element to one pixel wide. 
- You can use height: 1px to shrink the element to one pixel tall. 


- You can use overflow:hidden to hide any text that overflows the one pixel 
height and width. 


SELECTOR { 
position: absolute; 
left:-9999px; 
top:-9999px; 
width: 1px; 
height: 1px; 
overflow:hidden; } 


This pattern applies to any element. 


Occasionally, you may want to give instructions to nonsighted users that you 
do not want to give to sighted users. For example, when filling out a form, the 
layout, graphics, and colors may make something obvious to a sighted user 
that is unknowable to a nonsighted user. You can use this design pattern to 
create instructions for nonsighted users without cluttering the screen seen by 
sighted users. Such instructions should be brief like headings, captions, and 
tooltips. 


You may want to include a screenreader-only link at the beginning of the 
document that skips to the main content, such as “skip to main content.” 
This keeps the visual interface uncluttered and makes the document easier 
to navigate for nonsighted users. On the other hand, visually impaired users, 
mobile users, and others benefit from seeing such a link—so you may not 
want to hide it. 


Screenreader-only text will be visible in non-CSS browsers and browsers that 
do not support absolute positioning. 


Text Replacement, Invisible Text; Absolute (Chapter 7); Left-aligned Sized 
Absolute Element (Chapter 9); Tabs, Flyout (Chapter 17) 


www. cssdesignpatterns.com/screenreader-only 
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CHAPTER 11 


Spacing Content 


d chapter discusses design patterns that put horizontal and vertical space around inline 
elements, which may contain text, images, objects, controls, and so on. This chapter contains 
the following design patterns: 


Spacing shows how to space text and content. It simply groups together the many 
properties built into CSS that put space around and between blocks, text, and content. 


Blocked shows how to render an inline element as a block element. This is a very 
important design pattern that is often combined with other patterns. 


Nowrap shows how to prevent the browser from wrapping text across lines. 
Preserved shows how to render whitespace in a document instead of collapsing it. 


Code shows how to mark up computer code, render it inline, display it as a block, 
preserve whitespace, and prevent it from being wrapped across lines. 


Padded Content shows how to put space around inline content to emphasize it. 


Inline Spacer shows how to insert a horizontal spacer into a line to put a precise 
amount of distance between content. 


Inline Decoration shows how to insert a decoration into a line. A decoration is style— 
not content. It lets you insert a colored background, a textured background, or a 
background image into the flow. You can put borders around it. You can use it to push 
content apart, to overlap prior content, and to underlap following content. 


Linebreak shows how to insert four different types of linebreaks into your document 
that can add extra space between lines or shrink the distance between lines. 


Inline Horizontal Rule shows how to insert a horizontal rule using an inline element. 
You can style the horizontal rule with images, borders, margins, and so on. This allows 
you to put extra space between lines, to overlap prior lines, and to underlap following 
lines. An inline horizontal rule is particularly useful because you can use an inline ele- 
ment anywhere. HTML’ horizontal rule is a block element and has limited styling 
options. 
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CHAPTER 11 ™ SPACING CONTENT 


Spacing 


© Spacing - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Spacing 


This paragraph is normal. It has no indentation, margins, padding, letter 
spacing, word spacing, text justification, or line spacing. 





This paragraph has many forms of spacing. The first 
line of text is indented. Margins indent the paragraph 
on all sides. Padding puts space between the paragraph 
and its borders. Letters have 1 extra pixel of space 
between them. Words have 2 extra pixels of space 
between them. Text is justified, which adds extra space 
between words to align text to the left and right edges. 
And lines have extra spacing between them. 








HTML 


«hi»Spacing«/h1» 


«p»This paragraph is normal. It has no indentation, margins, padding, 
letter spacing, word spacing, text justification, or line spacing.</p> 


«p class-"elegant"»This paragraph has many forms of spacing. The first line of text 
is indented. Margins indent the paragraph on all sides. Padding puts space 

between the paragraph and its borders. Letters have 1 extra pixel of space between 
them. Words have 2 extra pixels of space between them. Text is justified, which 
adds extra space between words to align text to the left and right edges. And 
lines have extra spacing between them.«/p» 


CSS 


*.elegant ( margin-left:40px; margin-right:80px; 
margin-top:30px; margin-bottom:30px; 
padding-top:25px; padding-bottom:25px; 
letter-spacing:1px; 
word-spacing:2px; 
line-height:1.7em; 
text-indent:40px; 
text-align:justify; 
border-top:1px solid black; border-bottom:1px solid black; j 
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Spacing 


Problem You want to control the spacing around content. 
[^7] 
Solution HTML E 
Tag a terminal block element with a class or ID of your choosing. zZ 
CSS S 
Apply styles to your chosen class or ID as follows: z 
Z 
E 


- Use margin-left to indent the left side of any element. 

- Usemargin-right to indent the right side of any element. 

- Use margin-top to indent the top of a block element. 

- Use margin-bottom to indent the bottom of a block element. 

- Use padding-left to pad the left side of any element. 

- Use padding-right to pad the right side of any element. 

- Use padding-top to pad the top of any element. 

- Use padding-bottom to pad the bottom of any element. 

- Use letter-spacing to add space between letters. 

- Use word-spacing to add space between words. 

- Use line-height to increase the spacing between lines. 

- Use text-indent to indent the first line of a terminal block element. 
- Use text-align: justify to justify text, which adds space between words. 


Pattern HTML 
<TERMINAL-BLOCK class="elegant">text</TERMINAL-BLOCK> 
CSS 
*.elegant { 
margin-left:+VALUE; margin-right:+VALUE; 
margin-top:+VALUE; margin-bottom:+VALUE; 
padding-left:+VALUE; padding-right: +VALUE; 
padding-top:+VALUE; padding-bottom: +VALUE ; 
letter-spacing:+VALUE; 
word-spacing:+VALUE; 
line-height :+VALUE; 
text-indent:+VALUE; 
text-align: justify; } 





Location This pattern works on all elements, with the exception that margin-top, 
margin-bottom, text-indent, and text-align work only on block elements. 
It is most common to apply spacing to terminal block elements. 


Limitations text-indent works only on terminal block elements. It does not work on inline 
elements. You can assign text-indent to structural block elements, and it will be 
inherited by descendant terminal block elements. 


Tips You can use negative values in margin, letter-spacing, and word-spacing to 
shrink spacing. You can assign a value smaller than 1em to line-height to shrink 
spacing between lines. You can assign an em measurement to text-indent to 
indent by an approximate number of letters. Since a letter is typically twice the 
height of its width, 2em equals four letters. 


Related to Code, Inline Spacer; Invisible Text (Chapter 10); Text Indent, Hanging Indent 
(Chapter 12); First-letter Dropcap, Hanging Dropcap (Chapter 18); Hanging 
Alert (Chapter 20) 


See also www. cssdesignpatterns.com/spacing 
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Blocked 


© Blocked - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Blocked 


The Blocked design pattern displays an inline element as a block element 
that can be styled in every way as a block element 


This is an inline element displayed as a block. Its first line is indented and 
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it has collapsing vertical margins. 





Name 
Street 
City, State Zip Country 
email 





HTML 
<h1>Blocked</h1> 


<p>The Blocked design pattern displays an inline element as a block element 
that can be styled in every way as a block element 
<span class="blocked">This is an inline element displayed as a block. 
Its first line is indented and it has collapsing vertical margins.«/span»«/p» 


<address> 
<span class="name">Name</span> 
<span class="address">Street</span> 
<span class="area"> 
«span class="locality">City</span>, 
«span class="region">State</span> 
«span class="postal-code">Zip</span> 
«span class-"country-name" »Country«/span» 
</span> 
<span class="emails"> 
<a class-"email" href="mailto:name@isp.com">email</a> 
</span> 
</address> 


CSS 
*.blocked { display:block; text-indent:2em; margin-top:5px; } 


address ( border:4px groove green; padding:10px; j 
address *.name ( display:block; ) 

address *.address ( display:block; ) 

address *.area ( display:block; ) 

address *.emails ( display:block; ) 


Blocked 


Problem 


Solution 


Pattern 


Location 


Tip 


Related to 


See also 


CHAPTER 11 = SPACING CONTENT 


You want to style text as a block. For example, you want to move an inline 
element to the next line, give it vertical margins, and indent its first line. Or, you 
want to use an element in your markup, such as «code», <samp>, or «address», 
that can only contain inline elements, and you want to display some or all of 
these inline elements as blocks. 


You can display any inline element as a block. This moves the element to a new 
line and makes it possible for block properties to work properly. This means 
text-indent, text-align, margin, border, padding, width, and height work like 
they do on block elements. If an inline element were not displayed as a block, 
these properties would have no effect, or they would work differently. This 
design pattern is the converse of Inlined, which displays block elements as 
inline elements. 


HTML 
Wrap the text that you want to be indented in a span or other inline element and 
assign it to a class or ID of your choosing. 


CSS 
Apply styles to your chosen class or ID as follows: 


- Use display:block to display the inline element as a block. 


- Optionally apply text-indent, text-align, margin, border, padding, width, and 
height to format the inline element as if it were a block element. 


HTML 
«INLINE class="indent"></INLINE> 
CSS 
*.indent ( display:block; 
text-indent:+VALUE; 
text-align: LEFT CENTER RIGHT; 
margin: +VALUE; 
border: WIDTH STYLE COLOR; 
padding: «VALUE; 
width: «VALUE; 
height: «VALUE; } 


This pattern works anywhere you can use an inline element. 


In spite of its simplicity, this is one of the most powerful design patterns. It allows 
you to combine the semantic meaning of inline elements with the styling 
features of block elements. In other words, you can feel free to tag elements 
based on their semantic meaning without sacrificing style. 


Code, Padded Content, Linebreak, Inline Horizontal Rule; Block Box, Display 
(Chapter 4); Inlined (Chapter 13); Image, Image Map, Content Over Image 
(Chapter 14); Tabled, Rowed, and Celled (Chapter 15); Outside-In Box, Opposing 
Floats, Tab Menu, Layout Links (Chapter 17); Center Callout, Block Quote, Inline 
Block Quote (Chapter 19) 


www. cssdesignpatterns.com/blocked 
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Nowrap 


© Nowrap - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Nowrap 





You can keep a phrase together using nowrap, such as 
DO NOT BREAK THIS ACROSS TWO LINES! 
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You can use nowrap to keep some browsers from breaking a hyphenated 
word across two lines, such as the following word: 
super-cali-fragilistic-expi-ali-docious! 





You can keep together a small code snippet containing a space, such as 
Kbr /». 


Notice how it breaks across two lines when nowrap is not applied to it: «bx 
Vo 


Be aware that nowrapped text can overflow its container. This does not affect t 











HTML 


<h1>Nowrap</h1> 

<div> 
<p>You can keep a phrase together using <code>nowrap</code>, such as 
<span class="nowrap">DO NOT BREAK THIS ACROSS TWO LINES!</span></p> 


<p>You can use nowrap to keep some browsers from breaking a hyphenated word 
across two lines, such as the following word: 
<span class="nowrap">super-cali-fragilistic-expi-ali-docious!</span></p> 


<p>You can keep together a small code snippet containing a space, such as 
«code class="nowrap">&lt;br /8gt;«/code».«/p» 

«p»Notice how it breaks across two lines when «code»nowrap«/code» 
is «em»not«/em» applied to it: <code>&lt;br /8gt;«/code».«/p» 


«p class="nowrap">Be aware that nowrapped text can overflow its container. This 
does not affect the width of other elements, but it may cause a browser to 
display a horizontal scrollbar requiring users to scroll to see the text.«/p» 

«/div» 


CSS 


*.nowrap ( white-space:nowrap; background-color:gold; j 


Nowrap 


Problem 


Solution 


Pattern 


Location 


Disadvantages 


Example 


Related to 


See also 


CHAPTER 11 ™ SPACING CONTENT 


You want to prevent the browser from wrapping text to a new line. For 
example, you want to keep together a phrase, a hyphenated word, or a 
small code snippet containing a whitespace, such as «br /». 


The rule white-space:nowrap prevents text from wrapping. You can apply 
white-space:nowrap to any inline element that you do not want wrapped. 


SELECTOR { white-space:nowrap; } 


This pattern applies to any inline element. If you assign white-space:nowrap; 
to a block element, it will be inherited by its child inline elements. 


When the browser viewport is smaller than the nonwrapped text, the browser 
viewport overflows, and the browser creates a horizontal scrollbar so the user 
can scroll to see all the unwrapped text. Even though it looks like the viewport 
has been resized, it has not. It is still the same width and height. All static, 
absolute, fixed, and floated elements are aligned and positioned as if the 
unwrapped text had never overflowed. Since users do not like to scroll 
horizontally, it is best to keep nowrapped text as short as possible. 


The example prevents the text in four elements from wrapping. The first 
unwrapped element contains a phrase that I wanted to stay in one line. The 
second unwrapped element contains a hyphenated word that I did not want 
broken across two lines. Most major browsers do not break at hyphens, 

but Opera 9 does. The third unwrapped element is a code fragment that 
contains whitespace that I did not want to break across two lines. The 
fourth unwrapped element contains a large amount of unwrapped text 

that overflows the browser's viewport. This causes the browser to display 
horizontal scrollbars so the user can scroll to read the unwrapped text. 


Preserved, Code; Overflow (Chapter 6); Flyout Menu, Layout Links 
(Chapter 17); Inline Alert (Chapter 20) 


Www. Ccssdesignpatterns.com/nowrap 
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CHAPTER 11 ™ SPACING CONTENT 


Preserved 


© Preserved - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Preserved 


You can preserve whitespace using <pre>. 


You can use white-space:pre to insert linebreaks and spaces. 
Preserved moves this sentence to a new line and indents it five spaces. 
A better approach is to insert <br /> and &nbsp; 


You can preserve 
whitespace in blocks. 


You can preserve 
whitespace in inline elements. 


You can turn white-space:pre 
on and off at any time. 





HTML 


<h1>Preserved</h1> 
«pre»You can preserve whitespace using <code>&lt;pre&gt;</code>.</pre> 


«p»You can use «code»white-space:pre«/code» to insert linebreaks and spaces. 
«span class-"preserved" » 
«/span»Preserved moves this sentence to a new line and indents it five spaces. 
«br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;A better approach is to insert 
«code»&lt;br /&gt;«/code» and «code»8amp;nbsp;«/code»«/p» 


«p class-"preserved"»You can preserve 
whitespace in blocks.«/p» 


«p»You can preserve «span class-"preserved" » 
whitespace «/span»in inline elements.«/p» 


«p class-"preserved"»You can turn «code»white-space:pre«/code» 
«span class="not-preserved" >on and off 
at any time.</span></p> 


CSS 


* preserved ( white-space:pre; } 
*.not-preserved { white-space:normal; } 
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Preserved 


Problem You want to selectively preserve whitespace around text and objects that 
you insert into the HTML document. For example, you want to preserve 
whitespace in code. You also may want to insert specific amounts of 
whitespace into your document without having to track the number of <br /» 
elements and &nbsp; entities you need to insert to achieve the desired effect. 


Solution When whitespace is an intrinsic part of the content, you can mark up the 
content with «pre» to preserve the whitespace. This identifies whitespace as 
part of the content and preserves it. «pre» also works in non-CSS browsers. 
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When whitespace is decorative or when you cannot use <pre>, you can use 
white-space: pre to prevent whitespace from being collapsed. 





You can assign white-space: pre to a span containing nothing but whitespace 
to direct the browser to render that whitespace—although this is probably not 
a good idea, as explained under “Disadvantages.” 


Pattern HTML 
<pre> CONTENT </pre> 


css 
SELECTOR { white-space:pre; } 
SELECTOR { white-space:normal; } 


Location white-space:pre applies equally well to any type of element. 


Advantages white-space: pre has several advantages over «pre». It can preserve 
whitespace in existing markup that you cannot modify to include <pre>. It 
allows preserved whitespace to intermingle with images, objects, and any 
other type of element. (The HTML specification prevents <pre> from 
containing <img>, <object>, «sub», «sup», «big», and «small».) It does not 
automatically style the content with a monospace font like «pre». It can 
preserve whitespace in an inline element. (Since «pre» is a block element, 
«pre» cannot be embedded in paragraphs, headings, and other terminal 
block elements.) Lastly, it can turn whitespace on and off selectively. 


Disadvantages Since it is unusual for whitespace to be preserved in HTML markup, it is easy 
to accidentally change the layout of the document just by rearranging a little 
whitespace in a preserved element. 


Most HTML authoring software and utilities automatically rearrange 
whitespace to make code more readable or to remove whitespace to reduce 
document size. These programs break preserved whitespace in elements 
styled with white-space:pre, but most retain whitespace in «pre». 


Tip You can use white-space:normal to override a rule that applies 
white-space:pre to an element. white-space:normal is the default. 


Related to Nowrap, Code; Inline Elements (Chapter 2) 


See also www. cssdesignpatterns.com/preserved 
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Code 


Code - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Code 


The following code is blocked and preserved: 


* blocked { display:block; } 
*.preserved { white-space:pre; } 
* code { font-family:monospace; } 


The following inline code uses the Nowrap design pattern: 
a = x(y* + z?) + 1. This prevents it from being wrapped across lines. 





HTML 


«hi»Code«/h1» 
«p»The following code is blocked and preserved: 


«code class="blocked preserved"> 

* blocked { display:block; } 

* preserved  ( white-space:pre; } 

* . code ( font-family:monospace; } 
«/code» 
</p> 


<p>The following inline code uses the Nowrap design pattern: 
<code class="nowrap preserved">a = x(y<sup>2</sup> + z<sup>3</sup>) + 1</code>. 
This prevents it from being wrapped across lines.</p> 


CSS 


* blocked { display:block; } 
* preserved ( white-space:pre; } 
*.nowrap { white-space:nowrap; } 


Code 


Problem 


Solution 


Pattern 


Location 


Variations 


Related to 
See also 


CHAPTER 11 ™ SPACING CONTENT 


You want to identify an element as containing code, and you want to control 
when it preserves whitespace, when it breaks across lines, and when it is 
displayed as a block. 


You can use «code» to identify text as computer code. The meaning of this 
element is well understood by search engines and document processors. By 
default, «code» is displayed inline, does not preserve whitespace, and can be 
wrapped across lines. When you want to display a block of code, add the Blocked 
design pattern. When you want to preserve whitespace in «code», add the 
Preserved design pattern. When you do not want code to wrap across lines, add 
the Nowrap design pattern. Note that you cannot use Preserved and Nowrap at 
the same time. 


HTML 

Use the «code» element to tag text as code. 

Assign blocked, preserved, or nowrap classes to «code», or assign classes or IDs 
with names of your choosing. 


CSS 
Apply styles to your chosen class or ID as follows: 


- Use white-space: preserve to preserve whitespace in <code>. 
- Use white-space:nowrap to prevent text in the «code» from wrapping. 
- Use display:block to display «code» as a block. 


HTML 
«code class-"BLOCKED PRESERVED NOWRAP"» CODE «/code» 


CSS 

*.blocked ( display:block; ] 
*.preserved { white-space:pre; } 
*.nowrap { white-space:nowrap; } 


This pattern works everywhere inline elements can be used. 


HTML provides three additional inline elements that are similar to «code». They 
are «var», «samp», and «kbd». «var» identifies its contents as a computer variable. 
«samp» identifies its contents as sample output from a computer program. «kbd» 
identifies its contents as keypresses that a user should type on a keyboard to 
accomplish a specific task. This design pattern can easily be applied to these 
elements to fine-tune how they are rendered. 


Blocked, Nowrap, Preserved; Inline Elements (Chapter 2) 


www. Ccssdesignpatterns.com/code 
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Padded Content 


© Padded Content - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Padded Content 


Padding sets apart text to emphasize it. Left and right padding inserts 
horizontal space before and after content. Padded content can be 
a letter... — 
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a word... 





a phrase... 


a paragraph... 


This multi-line text is padded as an entire block rather 
than padded on each line. 





HTML 


<h1>Padded Content«/h1» 


«p»Padding sets apart text to emphasize it. 
Left and right padding inserts horizontal space before and after content. 
Padded content can be 
«br /»«span class-"padded-mild"»a letter...</span>&rarr; 
«br /><span class="padded-emphasized">a word...«/span»&rarr; 
«br /»«span class-"padded-strong"»a phrase...«/span»&rarr; 
«br /><span class="padded-extreme">a paragraph...</span>&rarr; etc. 
<span class="padded-strong-BA">This multi-line text is padded as an 
entire block rather than padded on each line. 
</span> 
</p> 


CSS 


*.padded-mild ( padding-left:1em; padding-right:1em; line-height:1em; } 
*.padded-emphasized ( padding-left:2em; padding-right:2em; line-height:2em; } 
*.padded-strong { padding-left:3em; padding-right:3em; line-height:3em; } 
*.padded-extreme { padding-left:4em; padding-right:4em; line-height:4em; } 


*.padded-strong-BA { display:block; padding:2em 5em; } 
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Padded Content 


Problem 


Solutions 


Patterns 


Location 


Limitations 


Tips 


Related to 
See also 


You want to put extra space around content to emphasize it and set it apart. 


Inline Padded Content 

You can use padding-left and padding-right to pad the left and right of an 
inline element. This pads the beginning and end of the element—not each line 
spanned by the element. Padding the top and bottom does not affect the height 
ofan inline element, but you can use line-height to change the height of each 
line spanned by the element. You cannot add space above just the first line and 
below just the last line spanned by the element. 


Blocked Padded Content 

You can use display:block to display an inline element as a block. This lets you 
use padding-left and padding-right to indent the left and right sides of all 
lines—not just the beginning of the first line and the end of the last. This lets you 
use padding-top and padding-bottom to add space above the top of the element 
and below the bottom of the element. You can also use line-height to change 
the height of each line in the element. 


Inline Padded Content 

INLINE-SELECTOR { padding-left:+VALUE; 
padding-right :+VALUE; 
line-height:+VALUE; } 


Blocked Padded Content 

INLINE-SELECTOR { display:block; 
padding-left:+VALUE; 
padding-right :+VALUE; 
padding-top:+VALUE; 
padding-bottom:+VALUE; 
line-height:+VALUE; } 


This pattern applies to any inline element. 


line-height is used to pad the height of lines because padding-top and 
padding-bottom have no effect on the height of a line. 


Padding is colored using the background-color or background-image. If you want 
transparent space around the element, use margin instead. If you want a different 
color or pattern than the background, use border instead. 


Inline Spacer 


www. cssdesignpatterns .com/padded-content 
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Inline Spacer 


© Inline Spacer - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Inline Spacer 


Just like you can use <br /> to insert vertical space into content, 

you can use an inline spacer to insert and control horizontal space. The 
inline spacer is a marker element that emphasizes the space in between 
content. You use it when you do not want to mark up content, but you still 
want to control the amount of space in between content. 
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For example, if your page design requires extra space before sentences, it is 
not a good idea to mark up sentences, because that would prevent you from 
cutting across sentence boundaries with additional markup. Marking up the 
first word of a sentence would not be semantically accurate because the 
extra space separates sentences not words. The inline spacer solves this 
problem because it does not interfere with other markup. Itis also 
semantically correct because its purpose is to mark up and emphasize space. 





HTML 


«hi»Inline Spacer</h1> 


«p»Just like you can use <code>&lt;br /8gt;«/code» to insert vertical space 
into content, «br /» you can use an inline spacer to insert and control 
horizontal space. 

«span class-"space"» «/span»The inline spacer is a marker element 

that emphasizes the space in between content. 

«span class="space"> «/span»You use it when you do «em»not«/em» want to 
mark up «em»content«/em», but you still want to control the amount of space 
in between content.«/p» 


«p»For example, if your page design requires extra space before sentences, 
it is not a good idea to mark up sentences, because that would prevent you from 
cutting across sentence boundaries with additional markup. 
«span class-"space"» «/span»Marking up the first word of a sentence would not 
be semantically accurate because the extra space separates sentences not words. 
«span class-"space"» «/span»The inline spacer solves this problem 
because it does not interfere with other markup. 
«span class-"space"» «/span»It is also semantically correct 
because its purpose is to mark up and emphasize space.«/p» 


CSS 


*.space { margin-left:0.5em; } 
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Inline Spacer 


Problem You want to insert a precise amount of horizontal space into inline content. 


Solution To create an inline spacer, you can insert a span with a class or ID of your 
choosing and set the amount of space using margin-left. A negative value in 
margin-left causes neighboring elements to overlap. Because you are styling 
space, it is a good idea to put whitespace in between the span’s start and end 
tags; although this is not required for this design pattern to work. 


Pattern HTML 
«span class-"space" » «/span» 


CSS 
*.space { margin-left:+VALUE; } 


Location This pattern works anywhere you can use an inline element. 


S 
> 
= 
zZ 
[ep] 
Q 
i=) 
Z 
— 
m 
Z 
EI 





Usage In general, the best way to space content is to embed it within an element and 
style the element with margin. This begs the question, Why would you ever need 
to use an inline spacer? 


Because the inline spacer is an empty element, it can be placed anywhere 
without interfering with the nesting of other elements. In those rare cases when 
the current markup does not align with where you need to control space, you can 
insert an inline spacer without compromising or complicating the nesting. This 
is why «br /» and «hr /» are empty marker elements. 


The inline spacer has the same purpose as «br /> and <hr /». It inserts space 
without marking up content. In other words, it marks and emphasizes the 
presence of space. It has semantic meaning: it indicates that the following 
content is set apart from the previous content—because that is what space 
does. The larger the space, the stronger the meaning. «br /» and «hr /» insert 
vertical space, and an inline spacer inserts horizontal space. 


If emphasizing or deemphasizing space is the point, it is semantically correct to 
mark up space, because marking up content would emphasize the content—not 
the space in between. 


In the past, spacer GIFs were improperly used for this purpose. Images are 
content—not spacing. Screen readers announce the presence of these images, 
and the latency involved in downloading them slows the rendering of the 
document. The inline spacer has none of these problems. 


Variations You can use pixels or a fixed measurement to size the space. You can use a 
percentage to scale the size proportional to the width of the containing block. 


Tips This design pattern also works with an empty span, «span»«/span», or an XML- 
style empty span, «span /». Like «br /»,«span /» works in all major browsers, 
and validates as valid XHTML, but not as valid HTML. 


Related to Inline Decoration, Linebreak; Block Spacer (Chapter 13) 


See also Www. Ccssdesignpatterns.com/inline-spacer 
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Inline Decoration 


©) Inline Decoration - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Inline Decoration 
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You can use Inline Decoration to do the following: 


e Insert colored decoration. 


e Insert patterned m= em decoration. 


e Insert imaged — po decoration. 





HTML 


<h1>Inline Decoration</h1> 


<div>You can use Inline Decoration to do the following: 
<ul> 
«li»Insert colored«span class="deco-solid">&nbsp;</span> decoration.«/li» 
«li»Insert patterned«span class="deco-groove">&nbsp;</span> decoration.«/li» 
«li»Insert imaged«span class="deco-spear">&nbsp;</span> decoration.«/li» 
</ul> 
</div> 


CSS 


div { font-size:18px; } 


*.deco-solid { padding-left: 40px; 
font-size:0.4em; vertical-align:middle; line-height: 24px; 
margin-left:3px; margin-right:-15px; 
background-color:gold; } 


*.deco-groove ( padding-left:10px; 
font-size:0.4em; vertical-align:middle; line-height:24px; 
border-left:20px groove black; border-right:20px ridge black; 
margin-left:3px; margin-right:3px; 
background-color:lightgray; } 


*.deco-spear ( padding-left:100px; 
font-size:1em; vertical-align:-3px; line-height:24px; 
margin-left:3px; margin-right:3px; 
background-image:url("spear.jpg"); background-position:top right; } 
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Inline Decoration 


Problem 


Solution 


Pattern 


Location 
Trade-offs 


Related to 


See also 


You want to insert a decoration into the content, such as a block of color, a styled 
border, or a background image. You want to move the decoration closer or 
further away from previous and following content. You do not want to insert an 
image because you want pure decoration—not content. 


HTML 
Insert a span containing nonbreaking space into the content. Assign to it a class 
or ID of your choosing. 


CSS 
Apply styles to your chosen class or ID as follows: 


- Use padding-left to set the width of the decoration. 

- Use font-size to set the height of the decoration. 

- Use vertical-align to move the decoration up or down. 

- Use line-height to size the height of the line to fit the decoration. 

- Use a positive value in margin-left to move the decoration to the right. 


- Use a negative value in margin-left to move the decoration to the left. A large 
enough value will cause the decoration to overlap previous content. 


- Use a positive value in margin-right to move the following content to the right 
and farther away from the decoration. 


- Use a negative value in margin-right to move the following content to the left 
and closer to the decoration. A large enough value will cause the content to 
overlap the decoration. 


- Use border to insert a border on the left, right, top, or bottom. 

- Use background-color to display a background color in the padding area. 
- Use background-image to display an image in the padding area. 

- Use background-position to position the background image. 


HTML 
«span class-"decoration"»8nbsp;«/span» 
CSS 
*.decoration ( padding-left:+VALUE; 
font-size:+VALUE; 
vertical-align: +VALUE; 
line-height :+VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
border-left:+W S C; border-right:+W S C; 
background-color:COLOR; 
background-image:url("FILE.EXT"); } 


This pattern works anywhere you can use an inline element. 


Unlike the Inline Spacer, the Inline Decoration requires the span to contain a 
nonbreaking space and to have a closing tag. Without the closing tag, a browser 
renders the background color or image underneath the following text. Without a 
nonbreaking space, a browser ignores padding and borders. 


Inline Spacer; Hanging Alert, Run-in Alert, Floating Alert, Left Marginal Alert, 
Right Marginal Alert (Chapter 20) 


WwWw.Ccssdesignpatterns.com/inline-decoration 
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HAPTER 11 SPACING CONTENT 


Linebreak 


© Linebreak - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Linebreak 
Toten mta, dggoreek anywhere. 
1 Normal linebreak. 


1 Linebreak plus 10 pixels. 


1 One-and-a-half linebreak. 


1 Double linebreak. 





1 Triple linebreak. 


1 Quadruple linebreak. 





HTML 


< 


< 


< 


hi>Linebreak</h1> 


p>You can insert a linebreak anywhere. 

<span class-"lb-half"»«/span»8uarr; One-half linebreak. 

«span class-"lb-single"»«/span»&uarr; Normal linebreak. 

«br /»«br class="br10px" /» &uarr; Linebreak plus 10 pixels. 

«span class-"lb-one-and-a-half"»«/span»8uarr; One-and-a-half linebreak. 
«span class-"lb-double"»«/span»&uarr; Double linebreak. 

«br /»«br class-"br3" /» &uarr; Triple linebreak. 

«span class-"lb-quad"»&uarr; Quadruple linebreak.«/span» 

/p» 


CSS 


* + X * X* 


* * 


.lb-half { display:block; margin-top:-0.5em; } 
.lb-single { display:block; margin-top:0; } 
.lb-one-and-a-half { display:block; margin-top:1.5em; } 
.lb-double { display:block; margin-top:2em; } 

.lb-quad { display:block; margin-top:4em; } 


.briopx { line-height:10px; } 
.br3 ( line-height:3em; } 
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Linebreak 


Problem 


Solutions 


Patterns 


Location 
Trade-offs 


Example 


Related to 


See also 


You want to insert a linebreak. You also want to add or reduce the amount of 
vertical space between the lines. 


Break 
You can use HTMLs break element, «br />, to move content to a new line. The 
height of the line following the break is determined by the line's content. 


Double Break 

You can move content to a new line and add extra space between the lines by 
inserting two «br /» elements in a row with nothingin between them. You can 
use line-height to style the second «br /» to control the amount of extra space 
inserted. 


Linebreak 

You can move content to a new line and add extra space between lines or even 
shrink the space between the lines by inserting an empty «span» and using 
display:block to display it as a block. You can use margin-top:+VALUE to insert 
additional space between the lines. You can use margin-top: -VALUE to shrink the 
space between the lines. 


Blocked 
You can apply the Blocked design pattern to an existing inline element to move 
the element onto a new line. 


Break 
«br /» 


Double Break 
«br /»«br class="br" /» 
*.br ( line-height:+VALUE; } 


Linebreak 

«span class-"lb"»«/span» 

*.]b { display:block; margin-top:+VALUE; } 
Blocked 

<ELEMENT class="1b"></ELEMENT> 

*.]b { display:block; margin-top:+VALUE; } 
This pattern can be used in any inline context. 


Two <br /> elements can add extra space between lines, but they cannot reduce 
space between lines. A <span> displayed as a block can insert or reduce space 
between lines and requires only a single element. 


In the example, I named classes descriptively to make it easier to match the code 
to the screenshot. In a real document, I would name classes functionally because 
it makes it easier to restyle the document later. 


Inline Horizontal Rule; Block Horizontal Rule, Block Spacer, Block Space 
Remover (Chapter 13) 


www. cssdesignpatterns.com/linebreak 


233 


S 
> 
e 
zZ 
Q 
Q 
=] 
z 
E 
m 
z 
= 





m 
2 
Lu 
= 
z 
Iz 
© 
oS 
= 
[E] 
= 
a 
D 





234 


CHAPTER 11 ™ SPACING CONTENT 


Inline Horizontal Rule 


© Inline Horizontal Rule - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Inline Horizontal Rule 


You can insert an inline horizontal rule anywhere. 
1 Invisible inline horizontal rule — a line-break. 


1 Double-border inline horizontal rule. 
99999999 tt 


1 Background inline horizontal rule. 


1 Combination Inline horizontal rule. 








HTML 


<h1>Inline Horizontal Rule</h1> 


<p>You can insert an inline horizontal rule anywhere. 
<span class="hr"></span>&uarr; Invisible inline horizontal rule - a line-break. 
<span class="hr border"></span>&uarr; Double-border inline horizontal rule. 
<span class="hr background"></span>&uarr; Background inline horizontal rule. 
<span class="hr combo"></span>&uarr; Combination Inline horizontal rule. 

</p> 


CSS 


*.hr { display:block; margin:0; } 


* border { padding-top:1px; margin-top:25px; margin-bottom:0; 
width:auto; margin-left:0; margin-right:0; 
border-top:4px ridge blue; border-bottom:4px groove blue; 
background:none; background-color:yellow; } 


* background { padding-top:5px; margin-top:25px; margin-bottom:0; 
width:auto; margin-left:76px; margin-right:76px; border:none; 
background:repeat-x left center url("diamond-blue.gif"); 
background-color:transparent; } 


*.combo { padding-top:5px; margin-top:25px; margin-bottom:0; 
width:400px; margin-left:auto; margin-right:auto; 
border-top:4px ridge blue; border-bottom:4px groove blue; 
background:repeat-x left center url("diamond-blue.gif"); 
background-color:white; } 
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Inline Horizontal Rule 


Problem 


Solution 


Pattern 


Location 


Tip 


Related to 


See also 


You want to insert a styled linebreak in between inline elements. You cannot use 
the horizontal rule because that works only between block elements. 


Apply styles to your chosen class or ID as follows: 


- Use display:block to display the inline element as a block element. This puts 
the horizontal rule on its own line and stretches it across the width of its 
containing block. 


- Use padding-top to make space for the background color and image. 
- Use margin-top: «VALUE to insert space above the horizontal rule. 

- Use margin-top: -VALUE to overlap the rule with the previous line. 

- Use margin-bottom:+VALUE to insert space below the rule. 

- Use margin-bottom: -VALUE to overlap the rule with the next line. 


- Use width:auto, margin-left:0, and margin-right:0 to stretch the rule to the 
left and right sides of the containing block. 


- Use width: auto, margin-left:+VALUE, and margin-right:+VALUE to stretch the 
rule to the left and right margins of the containing block. 


- Use width: «VALUE, margin-left: auto, and margin-right: auto to size and center 
the rule. 


- Use border-top to display a border above the rule. 

- Use border-bottom to display a border below the rule. 

- Use background-image to display a background image in the rule. 
- Use background-repeat: repeat-x to tile an image across the rule. 


- Use background-position:left center to position the background image in the 
vertical middle of the rule. 


- Use background-color to display a background color in the rule. 


HTML 
<span class="hr"></span> 


CSS 

*.hr ( display:block; 
padding-top:+VALUE; width:+VALUE; 
margin-top:+VALUE; margin-bottom:+VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
border-top:WIDTH STYLE COLOR; 
border-bottom:WIDTH STYLE COLOR; 
background-image:url("FILE.EXT"); 
background-position:left center; 
background-repeat:repeat-x; 
background-color:COLOR; } 


This pattern applies to inline elements. 


display:block; is the only required rule. The rest are optional and can be used in 
any combination. This design pattern is much more versatile than the line break, 
which cannot be styled. 


Linebreak; Block Horizontal Rule, Block Spacer, Block Space Remover 
(Chapter 13) 


www. cssdesignpatterns.com/inline-horizontal-rule 


235 


S 
P 
e 
= 
Q 
Q 
=] 
= 
= 
m 
z 
= 





CHAPTER 12 


Aligning Content 


dii chapter discusses design patterns that align text and content horizontally and vertically 
to their containing blocks. These alignment patterns work in the normal flow without using 
absolute or relative positioning. 

The first three design patterns align content horizontally. The next three design patterns 
align content vertically. The last design pattern and the example at the end of the chapter are 
quite esoteric and have little practical application. I have included them to demonstrate the 
powerful capabilities built into the inline formatting context. 


Text Indent shows how to indent the first line of text. 
Hanging Indent shows how to create a hanging indent. 


Horizontal-aligned Content shows how to align text and inline content to the left, 
right, or center. It also shows how to justify text and inline content. 


Vertical-aligned Content shows how to vertically align an inline element to its parent's 
fontlines. These fontlines define an alignment context. 


Vertical-offset Content shows how to vertically offset an inline element from its 
parent's baseline. 


Subscript and Superscript shows how to create subscript and superscript text, and how 
to make it look consistent across all browsers. 


Nested Alignment shows how to nest alignment contexts. 


Advanced Alignment Example is not a design pattern, but a fun example showing off 
how alignment and relative positioning can create sophisticated inline layouts. 
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Text Indent 


© Text Indent - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Text Indent 





text-indent indents the first line of a terminal block element, such 
as a paragraph, division, heading, list item, or this table cell. 


text-indent does not work on inline elements, such as this span. | 
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HTML 


<h1>Text Indent</h1> 


«table»«tr»«td class="text-indent"><code>text-indent</code> 
indents the first line of a terminal block element, such as a paragraph, 
division, heading, list item, or this table cell. 

«/td»«/tr»«/table» 





<p><span class="text-indent"><code>text-indent</code> does 
<em>not</em> work on inline elements, such as this span.</span></p> 


CSS 


*.text-indent { text-indent:60px; } 


/* Nonessential rules are not shown. */ 


CHAPTER 12 = ALIGNING CONTENT 


Text Indent 


Problem 


Solution 


Pattern 


Location 


Tip 


Variation 


Related to 


See also 


You want to indent the first line of a terminal block element, such as a 
paragraph. 


You can use a positive value in text-indent to indent the first line of text. 


HTML 
<TERMINAL-BLOCK class="text-indent"> content </TERMINAL-BLOCK> 


CSS 
*.text-indent { text-indent:+VALUE; } 


text-indent works only on terminal block elements. It does not work on 
structural block elements or inline elements. By default, text-indent is inherited 
by child elements. This means you can assign text-indent to a structural block 
element, and all descendant terminal block elements will inherit the value you 
assigned to text-indent. 


Furthermore, this design pattern only works on content. If an element contains 
no content, there is nothing to indent, and this property will have no visual 
impact. Even though the name of the property is text-indent, it indents all 
content, regardless of whether or not it is text. 


Normally you want indentation and margins to be consistent. All major browsers 
set the indents of their list items at 40 pixels. 


You could create a first-line indent using first-letter to select the first letter of 
a terminal block element and then style it with a positive margin-left. This is 
more work and is less reliable than text-indent. 


Hanging Indent; Invisible Text (Chapter 10); Blocked, Spacing (Chapter 11); 
First-letter Dropcap, Hanging Dropcap (Chapter 18); Hanging Alert (Chapter 20) 


www. cssdesignpatterns.com/text-indent 
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Hanging Indent 


© Hanging Indent - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Hanging Indent 





A hanging indent uses a negative value for text-indent and a positive 
value for padding-left. Hanging indents only work in terminal block 
elements like this paragraph. 





If you do not want the hanging indent to go all the way to the left, make 
the positive value in padding-left larger than the absolute value 
of text-indent. 








HTML 


«hi»Hanging Indent«/hi» 


«p class="hanging-indent">A hanging indent uses a negative value for 
<code>text-indent</code> and a positive value for <code>padding-left</code>. 
Hanging indents only work in terminal block elements like this paragraph.«/p» 


«p class="hanging-indent2">If you do not want the hanging indent to 
go all the way to the left, make the positive value in «code»padding-left«/code» 
larger than the absolute value of «code»text-indent«/code».«/p» 


CSS 


*.hanging-indent ( text-indent:-50px; padding-left:50px; ) 
*.hanging-indent2 ( text-indent:-50px; padding-left:70px; ) 


/* Nonessential rules are not shown. */ 
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Hanging Indent 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Tips 


Variation 


Related to 


See also 


You want to insert a hanging indent on the first line in a terminal block 
element, such as a paragraph. 


You can use a negative value in text-indent to extend the first line of text into 
the left padding area of a terminal block element so that it hangs over the left 
side of the element. You can use a positive value in padding-left to make 
room for the hanging indent. 


HTML 
«TERMINAL-BLOCK class-"hanging-indent"»content«/TERMINAL-BLOCK» 


CSS 
*.hanging-indent ( text-indent:-VALUE; padding-left:+VALUE; } 


text-indent works only on terminal block elements that contain content. 

It does not work on structural block elements or inline elements. By default, 
text-indent is inherited by child elements. You will only notice the hanging 
indent if the element contains more than one line. 


Because this design pattern uses padding-left to indent the block, the border 
surrounds the entire block. If you use margin-left to indent the block, the 
negative indent will stick outside of the border. 


This design pattern does not apply to inline elements. You can use the Padded 
Content or Inline Spacer design patterns to achieve this same effect using 
inline elements. 


A hanging indent is normally used to create list items. HTML provides the 
unordered list «ul» and the ordered list «ol» for this purpose. 


Normally, you want indentation and margins to be consistent. The default 
indentation for a list item is 40 pixels. You may also want to use —40 pixels for 
text-indent and 40 pixels for padding-left. 


You could create a first-line indent using first-letter to select the first letter 
of a terminal block element and then style it with a negative margin-left. This 
is more work and is less reliable than text- indent. 


Text Indent; Blocked, Spacing (Chapter 11); Hanging Dropcap (Chapter 18); 
Hanging Alert (Chapter 20) 


www. cssdesignpatterns .com/hanging-indent 
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CHAPTER 12 = ALIGNING CONTENT 


Horizontal-aligned Content 


© Horizontal-aligned Content - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Horizontal-aligned Content 


text-align:left | 
text-align:center | 











text-align:right | 


text-align:justify justifies the content so that it is aligned to the left 
side and the right side. Most browsers adjust the space between the words 
and objects to justify the text. 











HTML 


<h1>Horizontal-aligned Content</h1> 


<p class="align-left"><code>text-align:left</code></p> 

<p class="align-center"><code>text-align:center</code></p> 

<p class="align-right"><code>text-align:right</code></p> 

<p class="align-justify"><code>text-align:justify</code> justifies the content so 
that it is aligned to the left side and the right side. Most browsers adjust 
the space between the words and objects to justify the text.</p> 


CSS 


*.align-left ( text-align:left; ) 
*.align-center ( text-align:center; ) 
*.align-right ( text-align:right; ) 
*.align-justify ( text-align:justify; ) 


/* Nonessential rules are not shown. */ 
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Horizontal-aligned Content 


Problem You want to left-align, center-align, right-align, or justify the content in a 
terminal block element, such as a paragraph. For example, you may want to 
center-align text in a heading, right-align a label assigned to a control, or left- 
align data in one table column and right-align data in another. 


Solution You can use text-align to align the text within its terminal block. 
- Use text-align:left to align the text to the left of the block. 
- Use text-align:center to align the text to the center of the block. 
- Use text-align:right to align the text to the right of the block. 


- Use text-align: justify to justify the text to both sides of the block. Browsers 
typically justify text by increasing space between words to stretch the text to the 
sides of the block. 


Patterns HTML 
«TERMINAL-BLOCK class-"align-left"»content«/TERMINAL-BLOCK» 
<TERMINAL-BLOCK class-"align-center"»content«/TERMINAL -BLOCK» 
«TERMINAL-BLOCK class-"align-right"»content«/TERMINAL-BLOCK» 
«TERMINAL-BLOCK class-"align-justify"»content«/TERMINAL-BLOCK» 


CSS 

*.align-left ( text-align:left; } 
.align-center { text-align:center; } 
.align-right ( text-align:right; ] 
.align-justify { text-align:justify; } 
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* * * 


Location This design pattern works only on terminal block elements containing content. 
Without content, there is nothing to align. It does not work on inline elements. 
It does not work directly on structural block elements, but you can assign 
text-align to a structural block element, and it can be inherited by child 
elements. 


Tips When justifying text, it is important to size the block large enough to prevent a 
browser from putting unpleasant amounts of extra whitespace between words. 
The justification algorithm is not sophisticated. It only adds space between 
words. It does not automatically hyphenate words, and it does not put extra 
space between letters. 


In spite of the name, text-align aligns all types of content including text, 
images, objects, controls, and so on. 


Related to Aligned Static Inline (Chapter 8); Left Aligned, Left Offset, Right Aligned, Right 
Offset, Center Aligned, Center Offset (Chapter 9); Spacing (Chapter 11); 
Opposing Floats, Tab Menu, Tabs, Layout Links (Chapter 17); Center Callout 
(Chapter 19) 


See also www. cssdesignpatterns.com/horizontal-aligned-content 
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CHAPTER 12 — ALIGNING CONTENT 


Vertical-aligned Content 


© Vertical-aligned Content - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Vertical-aligned Content 





i text-top 


i middle | baseline text-bottom 


A A 
text-top ^ _A_ middle > yy > text-bottom + KK 
X "s 


A 
K 


baseline —^ 


HTML 


«hi»Vertical-aligned Content</h1> 


<div><span class="main">AMjx</span> 
<img class-"text-top" src-"bar.gif" alt-"bar" 
/»«span class="text-top text"» text-top</span> 
«img class-"middle" src-"bar.gif" alt-"bar" 
/»«span class-"middle text"» middle«/span» 
«img class-"baseline" src-"bar.gif" alt-"bar" 
/»«span class-"baseline text"» baseline«/span» 
«img class-"text-bottom" src="bar.gif" alt="bar" 
/»«span class="text-bottom text"» text-bottom«/span»«/div» 





«p class="text"> 

baseline &rarr; «img class-"baseline" src-"star.gif" alt-"star" /» 

text-top &rarr; «img class="text-top" src-"star.gif" alt-"star" /» 

middle &rarr; «img class="middle" src-"star.gif" alt-"star" /» 

text-bottom &rarr; «img class="text-bottom" src-"star.gif" alt-"star" /»«/p» 


CSS 


div ( font-size:60px; line-height:normal; border:1px solid black; } 
*.main ( background-color:gold; padding:0 10px; } 


* 


.text ( font-size:18px; } 


.text-top ( vertical-align:text-top; ] 
.middle ( vertical-align:middle; } 

.baseline ( vertical-align:baseline; ] 
.text-bottom { vertical-align:text-bottom; } 


* + * X* 
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Vertical-aligned Content 


Problem 


Solution 


Pattern 


Example 


Related to 


See also 


You have different sizes of inline elements that you want to align to a common 
set of reference points. For example, when you have images and text on the same 
line, you want to align the images to the top, middle, baseline, or bottom of text. 


You can use vertical-align to align an inline element to one of its parent's four 
fontlines: text-top, middle, baseline, and text-bottom. By default, inline content 
is aligned to the baseline. 


Fontlines provide four reference points to which you can align inline content. 
They define what I call an alignment context. Notice how the star image in the 
example is aligned to each of the four fontlines established by its paragraph, and 
its neighboring text is aligned to the paragraph's baseline. This is a key point. The 
star and text are not aligned to each other. They are aligned to the fontlines 
established by their parent, the paragraph. 


A terminal block establishes the initial alignment context for its inline children 
and text. The font and font-size of a block defines the location of the four font 
lines. The text-top is located at the top of characters with accents, like the 
letter “A.” The baseline is located at the bottom of characters that do not have 
descenders, like the letter "M." The text-bottom is located at the bottom of 
characters that have descenders, like the letter “j.” The middle is located in the 
middle of the ex height, which is the middle of the letter "x." 


You can use vertical-align:top or bottom to align an inline element to the top 
or bottom of a line. top and bottom are typically the same as text-top and 
text-bottom—unless the height of a line is taller than its content. A line can be 
taller than its content when it contains images, objects, different font sizes, 
different vertical alignment, or a larger line-height. 


If a parent and child share the same font and font-size, their fontlines are 
located in the same vertical positions. Aligning to the same fontlines produces 
no change in alignment. To see changes, elements need to have different font 
sizes, or in the case of images and objects, their height needs to be larger or 
smaller than the font-size ofthe alignment context. 


HTML 
«TERMINAL BLOCK» «INLINE» content «/INLINE» «/TERMINAL BLOCK» 


CSS 
TERMINAL BLOCK SELECTOR { font-size:+em; } 
INLINE SELECTOR ( vertical-align:FONTLINE; } 


The division in the example defines an alignment context with a font-size of 

60 pixels. The letters “AMjx” show the font size rendered at its full height from the 
accent on top of the “A” to the bottom of the “j.” The height of the letter “M” is 
the em height. The height of the letter "x" is the ex height. The images and spans 
inside the division are aligned to each of the division's fontlines. 


Notice how the closing /» of each «img /» element is placed on the next line 

with no spaces between it and the following «span». This prevents the whitespace 
from collapsing out of the span into the division. Since the division has a 
font-size of 60 pixels and the span has a font-size of 18 pixels, whitespace 

in the division is much wider than whitespace in the spans. 


Vertical-offset Content, Subscript and Superscript, Nested Alignment; HTML 
Whitespace (Chapter 2); Table, Vertical-aligned Data (Chapter 15); Layout Links 
(Chapter 17) 


Www.Ccssdesignpatterns.com/vertical-aligned-content 
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CHAPTER 12 = ALIGNING CONTENT 


Vertical-offset Content 


©) Vertical-offset Content - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Vertical-offset Content 





A 


raised tem / \ A 
baseline __ . baseline . "y 7 baseline | 
lowered iem fï 





HTML 


<hi>Vertical-offset Content</h1> 


<div> 
baseline . 


«span class-"raised"»raised 1em «/span» 
<img class-"raised" src="star.gif" alt="star" /> 


. baseline . 


«span class="lowered">lowered 1em </span> 
«img class-"lowered" src-"star.gif" alt-"star" /» 


. baseline | 
«/div» 


CSS 
div ( border:1px solid black; } 
*.baseline ( vertical-align:baseline; ] 


*.raised { vertical-align:1em; } 
*.lowered { vertical-align:-1em; } 
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Vertical-offset Content 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tip 


Example 


Related to 


See also 


You want to vertically offset two or more inline elements that are on the same 
line. For example, you want to vertically position an image in relation to 
neighboring text, or you want to position two or more images in relation to 
each other, or you want to position a drop cap in relation to the following text, 
or you want to offset text to create a subscript or superscript effect. 


You can use vertical-align to offset a child inline element from the baseline 

of its parent. Positive values raise an element above the baseline, and negative 
values lower it below the baseline. A line automatically expands to accommodate 
the offset element. 


You can use ems in vertical-align. One em is equal to the element's font-size. 
For example, 1em raises text above where its top is normally located, and -1em 
lowers text below where its bottom is normally located. Ems have the advantage 
of scaling along with the text. Thus, if a browser zooms in or out, ems scale 
proportionally. 


You can use pixels in vertical-align. Pixels do not change when a browser 
zooms in or out, and the offset does not change. This is usually not desirable 
when offsetting text, but it may be exactly what you want when you are 
offsetting images. 


vertical-align:0 is the same as aligning to the baseline. 


HTML 
«INLINE» content </INLINE> 


CSS 
INLINE SELECTOR { vertical-align:+VALUE; } 


This pattern works on inline text elements. 


Vertical offsets are for contrasting the position of two or more inline elements 
that are on the same line. Since a browser always centers content in a line, if you 
vertically offset only one element on a line, you will not see the offset because it 
is centered away. 


I do not recommend using percentages to vertically offset inline elements 
because the results are hard to predict. The percentage is a proportion of the 
element's line-height. This would be useful if percentages offset an element 
from the bottom of a line, but they offset it from the baseline. Since a browser 
centers content within a line, the location of the baseline within a line is not 
easy to predict. 


The division in the example defines an alignment context with a font-size of 
60 pixels. The letters “AMjx” show the rendered font size. The images and spans 
inside the division are offset from the baseline of the division's alignment 
context. 


Vertical-aligned Content, Subscript and Superscript, Nested Alignment; Inline 
Decoration (Chapter 11); Button (Chapter 17); Aligned Dropcap, First-letter 
Dropcap, Padded Dropcap (Chapter 18) 


WwWw.Cssdesignpatterns.com/vertical-offset-content 
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Subscript and Superscript 


© Subscript and Superscript - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


sub, super? Me 


*4 Subscript and Superscript - Opera 
File Edit View Bookmarks Widgets Tools Help 


sub, super? Me 
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E Subscript and Superscript - Microsoft Internet Explorer 
: File Edit View Favorites Tools Help 


sub, super? Mle 


© Subscript and Superscript - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Subscript and Superscript 
sub, super? Me 





HTML 


«hi»Subscript and Superscript</h1> 
«p class="large">sub<sub>1</sub> super<sup>2</sup> M«sup»lle«/sup»«/p» 


CSS 


sub ( vertical-align:-0.5em; font-size:0.75em; ) 
sup { vertical-align:0.5em; font-size:0.75em; } 


* large ( font-size:32px; } 


CSS Internet Explorer 


sub ( font-size:0.9em; } 
sup { font-size:0.9em; } 
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Subscript and Superscript 


Problems 


Solutions 


Patterns 


Location 
Related to 
See also 


You want to use subscripts and superscripts. 


Since each browser uses different vertical offsets and font sizes for subscripts 
and superscripts, you may also want to standardize their styles to fit your tastes. 
For example, Firefox 2 lowers subscripts just a little, and Opera 9 uses a larger 
font size for subscripts and superscripts. The first three screenshots in the 
example show how subscripts and superscripts look in Firefox 2, Internet 
Explorer 7, and Opera 9. The fourth screenshot shows subscripts and 
superscripts styled to look the same in all browsers. 


You can mark up inline content with «sub» for subscripts and «sup» for 
superscripts. Subscripts and superscripts are semantic elements. In foreign 
languages, such as French, certain characters must be superscripts to be correct, 
such as the "lle" in the abbreviation for “mademoiselle.” In math, subscripts and 
superscripts change the meaning of a number. 


If you want to ensure all browsers render subscripts and superscripts the same, 
you can assign vertical-align and font-size to «sub» and «sup». You can use em 
values so the location and size of the subscript always remains proportional to 
the font size. 


- You can assign a negative em to vertical-align to lower a subscript. For 
example, -0.5em lowers the text by half its font-size. 


- You can assign a positive em to vertical-align to raise a superscript. For 
example, 0.5em raises the text by half its font-size. 


- You can assign a positive em to font-size to size the subscript or superscript to 
be proportional to the font size of its parent. For example, 0. 75em shrinks the 
subscript or superscript to 75% of its parent's size. 


- Since Internet Explorer 7 and earlier versions have a "feature" that sizes 
subscripts and superscripts 75% smaller than the value you specify with 
font-size, you can compensate by assigning a positive value to font-size that 
is 120% larger than the em value you assign to other browsers. You can use the 
Conditional Stylesheet design pattern to load a stylesheet specific to Internet 
Explorer to assign these values. For example, if you assign 0.75em to all browsers, 
you can assign 0.9em to Internet Explorer. 


HTML 
«sub»text«/sub» 
«sup»text«/sup» 


CSS 
sub ( vertical-align:-em; font-size:+em; } 
sup { vertical-align:+em; font-size:+em; } 


This pattern works only on inline text elements. 
Vertical-offset Content; Inline Elements, Conditional Stylesheet (Chapter 2) 


www.cssdesignpatterns.com/subscript 
www.cssdesignpatterns.com/superscript 
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Nested Alignment 


Nested Alignment - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Nested Alignment 





text-top 
-20px y pacetine gop ERa 





HTML 


«hi»Nested Alignment</h1> 
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<div class="ac1"> 
«span class="main">AMjx</span><span class="ruler"> </span> 
<span class="ac2 lower20px main ruler" >&nbsp; &nbsp; -20px 
«span class="ac3 raise35px"»435px«/span» 
«span class-"ac3 text-top">text-top</span> 
«span class="ac3 middle"»middle«/span» 
«span class="ac3 baseline"»baseline«/span» 
«span class="ac3 text-bottom"»text-bottom«/span» 
«span class="ac3 lower20px"»-20px«/span» 
</span> 
</div> 





CSS 


*.aci ( font-size:60px; ) 
*.ac2 ( font-size:30px; ) 
*.ac3 ( font-size:12px; ) 


.raise35px { vertical-align:35px; } 
.lower20px { vertical-align:-20px; ] 
.text-top ( vertical-align:text-top; ] 
.middle { vertical-align:middle; } 

.baseline ( vertical-align:baseline; ] 
.text-bottom { vertical-align:text-bottom; } 


* + E X X X 


/* Nonessential rules are not shown. */ 
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Nested Alignment 


Problem You want to nest alignment contexts. Nested alignment contexts is a unique 
layout feature built into CSS. You will probably never need to use it. I have 
included this design pattern mainly for completeness. 


Solution You can nest alignment contexts by nesting inline elements and assigning them 
to different font-size values. Each nested inline element defines its own, 
independent alignment context based on the size of the font assigned to the 
element. 


Fontlines define two alignment contexts for each element: the alignment context 
in which an element is rendered, and the alignment context an element supplies 
for its children. 


Pattern HTML 


> 
«INLINE class-"aci"» content = 
<INLINE class="ac2"> content </INLINE> Z 
</INLINE> D 
S 

CSS = 
Z 

s 


*.CLASS ( font-size:+em; 
white-space:nowrap; 
vertical-align:tem; 
left:xem; 
position:relative; } 





Location This pattern works only on inline elements. 


Limitations Nested alignment contexts work well as long as they stay on the same line. 
When a nested alignment context is wrapped to another line, the results vary 
depending on the browser. Internet Explorer 7 retains the alignment context. 
Opera 9 shrinkwraps the alignment context on each line to fit the content on the 
line. Firefox 2 works like Internet Explorer when borders are displayed and works 
like Opera 9 when no borders are displayed. You can use white-space:nowrap to 
prevent alignment contexts from breaking across lines. 


Tip You can nest inline elements indefinitely to create as many alignment contexts 
as you want. 
Example In the example, I have three alignment contexts: «div class-"aci"», <span 


class="ac2">, and «span class="ac3">. Each is set to three different font sizes: 
60px, 30px, and 12px, respectively. Each font-size defines a different set of 
fontlines to which child elements can align. There are six elements using the 
third alignment context, «span class="ac3">, and each one is aligned to a 
fontline or offset from the baseline of «span class="ac2">. <span class="ac2"> 
is offset from the baseline of «div class-"aci"». 


Notice how ac2’s alignment context is preserved internally while it is aligned to 
ac1’s alignment context externally. Internally, each inline element defines its own 
alignment context to which its children can be aligned. Externally, each inline 
element is aligned to the alignment context of its parent. 


Related to Vertical-aligned Content, Vertical-offset Content, Advanced Alignment Example; 
Positioned, Relative (Chapter 7); Offset Relative (Chapter 8); Nowrap 
(Chapter 11) 


See also www. cssdesignpatterns.com/nested-alignment 
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Advanced Alignment Example 


© Advanced Alignment Example - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Advanced Alignment Example 


f(x) -X "i 
n=0 





HTML 


«hi»Advanced Alignment Example</h1> 


«p class="large"> 
«span class-"aci"» 
«span class-"aci-func"»&fnof;(x) = </span> 
«span class="ac1-sum">&sum; </span> 
<span class="ac1-min">n=0</span> 
<span class="ac1-max">&infin; </span> 
«span class="aci-formula">a<sub>n</sub>x 
<span class="ac2"> 
(<span class="ac2-num">n-1</span><span class="ac2-dnm">2</span> 
<span class-"ac2-close" >)</span> 
</span></span></span></p> 


CSS 


sub { vertical-align:-0.3em; font-size:0.75em; } 


*.aci (font-size:4em; font-family:"Times New Roman" serif; white-space:nowrap; } 

*.aci-func(vertical-align:0.6em; font-size:0.3em; font-style:italic; } 

*.aci-sum {vertical-align:0.2em; font-size:0.6em; position:relative; left:-0.1em; } 

*.aci-max (vertical-align:3em;  font-size:0.2em; position:relative; left:-6em; } 

*.aci-min {vertical-align:-1em; font-size:0.2em; position:relative; left:-3.3em; } 

*.aci-formula { vertical-align:0.6em; font-size:0.3em; font-style:italic; 
position:relative; left:-4em; letter-spacing:0.1em; } 


*.ac2 (vertical-align:0.4em; font-size:1.5em; position:relative; left:-0.3em; } 
*.ac2-num (vertical-align:0.7em; font-size:0.4em; border-bottom:1px solid black; j 
*.ac2-dnm {vertical-align:-0.4em; font-size:0.4em; position:relative; left:-1.4em; } 
*.ac2-close ( position:relative; left:-0.65em; } 
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Advanced Alignment Example 


Example 


Features 


Location 
Related to 


See also 


Ihave included this example for fun. It uses advanced alignment techniques and 
relative offsets. This is not an actual design pattern. Something this complex is 
probably better rendered as an image or as MathML. This is simply an example 
of how powerful CSS can be. 


This example is sizable. You can use the zoom feature in your browser to enlarge 
or shrink it. Everything remains aligned properly as it changes size. 


This example works the same in all major browsers, which shows how 
consistently browsers have implemented alignment contexts. 


The example uses font-size to set the size of each alignment context. The two 
alignment contexts in the example are defined by the elements assigned to the 
classes ac1 and ac2. I assigned a large enough font-size to ac1 to make room for 
all its vertically aligned children. The second alignment context is the (n-1)/2 
part of the formula. Notice how all its children are aligned relative to the second 
alignment context. 


I used white-space:nowrap to prevent the example from wrapping to another 
line. I used vertical-align to align elements to various parts of the example. 
I used position:relative and left to move elements into horizontal position. 
I used em measurements for vertical-align and left so they would scale 
proportionally to the font-size. This allows them to grow or shrink as the 
font-size grows and shrinks. You can assign different font sizes to the 
paragraph in the example to see this in action. 


HTML 
«INLINE class-"aci"» content 

«INLINE class="ac2"> content </INLINE> 
«/ INLINE» 

CSS 
*.CLASS { font-size:+em; 
white-space:nowrap; 
vertical-align:+em; 
position: relative; 

left:+em; } 


These features work only on inline elements. 


Vertical-aligned Content, Vertical-offset Content, Nested Alignment; Positioned, 
Relative (Chapter 7); Offset Relative (Chapter 8); Nowrap (Chapter 11) 


www. cssdesignpatterns .com/advanced-alignment-example 
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CHAPTER 13 


Blocks 


The main purpose of this chapter is to show various ways you can emphasize document 
structure by styling blocks. Many design patterns in other chapters apply to blocks, but this 
chapter contains patterns specific to styling block elements to reveal document structure. 


Chapter Outline 


Structural Meaning shows how blocks create hierarchical and sequential structure. 
Visual Structure shows how to style blocks to bring out the document structure. 


Section shows how to organize your document into sections for easy styling and for 
better structural meaning for search engines and document processors. 


Lists shows many ways to create lists and list markers. 
Background Bulleted shows how to add bullets to a list using background images. 


Inlined shows how to render a block element as if it were an inline element. This allows 
blocks to be rendered from left to right and to wrap across lines. 


Collapsed Margins shows how to collapse and uncollapse vertical margins between 
block elements. 


Run-in shows how to run a block into the following sibling block as if it were an inline 
element within the following block. Run-in headings save space and are very attractive. 


Horizontal Rule shows how to use and style a horizontal rule in spite of the problems 
caused by Internet Explorer 7, which refuses to remove its built-in styles from <hr />. 


Block Spacer shows how to insert a precise amount of vertical space between selective 
blocks without having to adjust margins individually. 


Block Space Remover shows how to remove a precise amount of vertical space between 
selective blocks without having to adjust margins individually. 


Left Marginal shows how to extract headings, notes, alerts, and images from the 
normal flow and move them into a wide left margin. 


Right Marginal works like Left Marginal except items are moved to the right. 
255 
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Structural Meaning 


zm 
x J Structural Meaning - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Structural Meaning 


Everything in a document is related. The block structure identifies the order and 
intensity of the relationships. The more elements you wrap around content, the 
more tightly connected it becomes to ancestors and siblings. 


This heading identifies the topic of its division 
This paragraph introduces the topic of the heading. 
This paragraph continues the topic of the heading. 


+ This is an unordered list. 
+ List items are more closely related than items in divisions. 
+ There is no significance to the sequence of unordered list items. 








Tables have the most closely related content 
Element Intensity Ordered 
div weak Yes 
ul medium No 
table strong Yes 

















HTML 


<body> 
«hi»Structural Meaning</h1> 


<p>Everything in a document is related. The block structure identifies the 
order and intensity of the relationships. The more elements you wrap around 
content, the more tightly connected it becomes to ancestors and siblings.</p> 





<div> 
«h2»This heading identifies the topic of its division</h2> 
<p>This paragraph introduces the topic of the heading.</p> 
<p>This paragraph continues the topic of the heading.</p></div> 


<ul> 
«li»This is an unordered list.«/li» 
<li>List items are more closely related than items in divisions.«/li» 
«li»There is no significance to the sequence of unordered list items.«/li»«/ul» 


«div» 
«h2»Tables have the most closely related content«/h2» 
«table»«tr»«th»Element«/th»«th»Intensity«/th»«th»Ordered«/th»«/tr» 
«tr»«td»div«/td»«td»weak«/td»«td»Yes«/td»«/tr» 
<tr><td>ul</td><td>medium</td><td>No</td></tr> 
<tr><td>table</td><td>strong</td><td>Yes</td></tr></table></div> 
</body> 
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Structural Meaning 


Problem 


Solution 


Pattern 


Location 
Related to 


See also 


You want to identify the structure of a document using blocks. 


Blocks define the structure of a document, and the structure of a document 
helps readers and computers understand the meaning of a document. 
Everything in a document is related. The block structure identifies the order and 
intensity of the relationships. The more elements you wrap around content, the 
more closely it relates to ancestors and siblings. 


HTML makes four assumptions about the meaning of document structure: 

1) A parent element defines the topic of its children. 

2) Siblings are ordered unless the parent element specifies otherwise. 

3) As the hierarchy deepens, meaning becomes more focused and connected. 


4) All content in the document body is related. Content in a division or a form is 
more closely related. Content in lists is even more closely related. Content in 
tables is the most closely related. 


Two types of structures exist in HTML: hierarchies and sets. You create 
hierarchies by nesting elements. You create sets by placing multiple elements 
inside a parent. There are two types of sets: ordered and unordered. 


Each structure in HTML starts out as a hierarchy and ends in a set. 


For example, a table creates a hierarchy of nested rows and cells. Within that 
hierarchy, a table contains an ordered set of rows, and each row contains an 
ordered set of cells. Cells in the same column are related, and cells in the same 
row are related. Because a cell is the intersection of a row and a column, it ties 
together the meaning of both. As a result, content in tables is most strongly 
related (that is why it is called relational data). 


Take another example: a list starts out as a hierarchy where a parent list element 
contains a set of list items. An ordered list contains an ordered set of related 

list items. An unordered list contains an unordered set of related list items. A 
dictionary list is an associative entity containing an unordered set of related 
terms and definitions. Lists can be nested within each other to create a hierarchy 
of lists. You can put content in lists when you want it to be more strongly related 
than content in the document body, a division, or a form. 





As a final example, a division organizes headings and paragraphs into a series 
of related topics where each heading introduces an ordered series of related 
paragraphs. Divisions can be nested to create a hierarchy of subtopics. 


HTML 

«PARENT BLOCK» 
«CHILD BLOCK 1» related content «/CHILD BLOCK 1» 
«CHILD BLOCK 2» related content «/CHILD BLOCK 2» 


«CHILD BLOCK N» related content «/CHILD BLOCK N» 
«/PARENT BLOCK» 
This pattern applies to block elements. 


Visual Structure; HTML Structure, Structural Block Elements, Terminal Block 
Elements, Multi-purpose Block Elements (Chapter 2) 
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Visual Structure 


See the Structural Meaning design pattern for the example. 


CSS (for the Structural Meaning Design Pattern) 


hi ( margin:0; font-size:1.9em; } 
h2 ( margin:0; margin-top:3px; font-size:1.2em; ] 


ul,div,td,th { border:1px solid black; background-color:gold; margin-top:20px; } 
div { padding:O 10px; } 

table ( border-collapse:collapse; margin:5px 0; } 

td,th ( background-color:white; width:20%; text-align:center; padding:2px; ] 

ul ( margin-left:0; padding:0 40px; } 

p,li ( margin:0; padding:2px 0; } 


STYLING EXCEPTIONS 


A stylesheet works well when you style classes of items, but it quickly becomes cumbersome when you style 
exceptions. To style one element, you typically add an ID to it and style the ID in the stylesheet. This is a 
minor inconvenience in a single document, but this inconvenience turns into a maintenance problem over 
time as documents change, styles change, and hundreds of documents share common stylesheets. For 
example, since an ID used for exceptional styling is part of an element, when the element moves, the excep- 
tional styling moves with it. This will likely cause unexpected results when you modify a document and will 
send you on a wild goose chase looking for the cause of the problem. 

The Horizontal Rule, Block Spacer, or Block Space Remover design patterns are good solutions for 
styling exceptional cases because they insert an element into the document. The element has structural 
meaning, is self-documenting, and is easy to reposition. You can style these spacer elements using standard 
classes so you are no longer styling exceptions. Spacer elements are only for exceptional cases. 





POSITIONAL STYLING 


At times you may want to style an element because it is in a certain position. For example, you may want to 
change the amount of margin before the first child and after the last child of a block because collapsed mar- 
gins work differently for the first and last child elements. If you apply an exceptional margin directly to the 
first child element, and then you move the first child so that it becomes a middle child, its exceptional margin 
moves with it. This is not the result you want because you want to style the position—not the element. 

One way to style a position is to use the Horizontal Rule, Block Spacer, or Block Space Remover design 
patterns. This works because it is easy to keep a spacer element in the right position—especially if you 
name its class intuitively, such as "first-child" and "last-child".The ultimate solution is positional 
selectors, but positional selectors in CSS 2.1 have limited functionality and do not work in Internet Explorer 6 
(although they work in Internet Explorer 7). CSS 3 positional selectors are powerful enough for positional 
styling, but are not yet available. 


CHAPTER 13 BLOCKS 


Visual Structure 


Problem 


Solution 


Related to 
See also 


You want to reveal the structure of a document visually. 


CSS provides a number of ways you can style blocks to reveal document 
structure. You can put vertical margins between blocks or use first-line indents to 
visually separate content into blocks. You can put bullets or numbers in a block's 
margin to enumerate blocks. You can use margins, borders, and padding to put 
boxes around blocks to reveal how they are nested inside each other. You can 
also assign font sizes to heading levels so that headings with a larger scope have 
a larger font size—this can reveal the nesting of blocks without having to put 
them inside boxes. 


You can help the user see the structural meaning of a document by visually 
styling the structure. To emphasize a close structural relationship, you can 
position elements closer together and give them a similar look. For example, 
elements inside lists and tables have a similar look to show they belong together. 
To set elements apart, you can position them further apart and style them 
differently. For example, lists, tables, and blocks have different default styles to 
emphasize the different meanings of their structures. Also, unordered lists use 
bullets to point out that their items are unordered. 


To create a consistent look and feel, it is a common practice to apply a standard 
set of styles to all blocks of the same type. For example, you may want all 
paragraphs and list items to have a 2-pixel vertical padding. In your stylesheet, 
you can select all elements of a certain type or all elements of a certain class 
and style them as desired. I demonstrate this in the example. 


Occasionally, you may want to change the space between two specific blocks. You 
can bring them closer together to emphasize the closeness of their relationship 
or push them further apart to emphasize their differences. Structurally, you are 
styling the space between the blocks. Since the relationship is not part of either 
block, but is between the blocks, it is more structurally accurate and simpler to 
insert a spacer block than it is to style the margin of one of the two blocks as an 
exception to its normal styling. 


HTML provides the «hr /» element for the purpose of inserting a structural 
break between blocks (and «br /» to insert a line break between inlines). The 
Horizontal Rule design pattern shows how to use and style «hr /». 


When you want to insert a structural break that is not as strong as a horizontal 
rule or you want to bring two blocks closer together, you can use the Block 
Spacer and Block Space Remover design patterns. 


Using a horizontal rule, a block spacer, or a block space remover should be the 
exception, not the norm. The structural meaning of breaks and links between 
elements is not as strong as nested structures. 


You may want to merge two blocks to emphasize a very close relationship 
between them. This is explored in the Inlined and Run-in design patterns. 


Structural Meaning, Horizontal Rule, Block Spacer, Block Space Remover 
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Section 


© Section - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Section 





Introduction 


This paragraph is about the introduction. 





Content 


This paragraph is about the content. 





Subsection Example 


+ This list item relates to the subsection example. 
+ This list item relates to the subsection example. 








HTML 


<h1>Section</h1> 


<div class="section introduction"> 
<h2>Introduction</h2> 
<p>This paragraph is about the introduction.</p> 
</div> 


<div class="section content"> 
<h2>Content</h2> 
<p>This paragraph is about the content.</p> 





<div class="section example"> 
<h3>Subsection Example</h3> 
<ul><li>This list item relates to the subsection example.«/li» 
«li»This list item relates to the subsection example.«/li»«/ul» 
«/div» 
«/div» 


CSS 


*.section ( padding:10px; margin:10px 0; background-color:gold; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:ipx solid gray; border-bottom:2px solid black; ] 
.section p ( margin:0; margin-top:5px; } 

.section h2 ( margin:0; margin-bottom:10px; j 

.section h3 ( margin:0; margin-bottom:10px; j 

.section.example { background-color:white; } 

.section *.section ( margin-bottom:0; } 


* + o * * * 


Section 


Problem 


Solution 


Pattern 


Location 


Tips 


Related to 
See also 
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You want to organize your document into sections, and you want to style various 
sections differently. 


HTML provides the division element to identify divisions of a document. A 
division is generic and has no meaning by itself. One way you can use a division 
is to create a section. A section is a part of a document that contains content 
relating to a specific theme or purpose. To identify the purpose, a section 
contains a heading followed by blocks of supporting statements. Subsections 
are often nested within sections to identify subthemes relating to the theme of 
the parent section. 


A division identifies the section's beginning and end, and the section's heading 
identifies its theme. The heading should be the first content-containing child of 
the division. The heading is what turns a division into a section. Any heading 
element can be used, such as «h1», <h2>, <h3>, <h4>, «h5», and <h6>. The heading 
level identifies the relative importance of the section. «h1» is the most important 
heading in a document. Following the heading are blocks of content and 
subsections. 


This design pattern imposes no constraints on the structure of sections and 
subsections, other than each section should contain a heading as its first 
content-containing child element. I use the phrase "content-containing child 
element" because a section may contain any number of decorative child 
elements, such as divisions and spans, prior to the heading. Such decorative 
child elements could be used to layer background images behind the section, 
for example. 


HTML 

«div class-"section TYPE"» 
«HEADING» content «/HEADING» 
«BLOCK» content «/BLOCK» 


«/div» 

CSS 

*.section ( STYLES } 
.section.TYPE { STYLES } 
.section.TYPE HEADING { STYLES } 


.section.TYPE BLOCK ( STYLES j 
.section *.section { STYLES } 


This pattern applies to block elements. 





* * * X 


The concept of a section is not part of any current HTML specification, but the 
XHTML 2.0 working draft includes a «section» element. 


There are no limits to the names you can use to classify your sections. Here are 
a few examples: callout, caution, content, example, figure, introduction, listing, 
note, quote, summary, table, tip, and warning. For 200 more examples, see the 
file Common Section Names.txt in the example folder. 


Structural Meaning, Run-in; Floating Section (Chapter 17) 
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Lists 


© Lists - Mozilla Firefox 
Eie Edit View History Bookmarks Tools He 


Lists 


Normal Lists Faux Lists 


v List item with custom bullet 1 display:list-item 
o List item with circle bullet 1:8-5 faux marker 


. List item with numbered bullet &middot; 
e List item with disc bullet &bull; 
displayed inside the margin &loz; 
faux marker &rsaquo; 
&ndash; &raquo; 
&mdash; 








HTML 


<h1>Lists</h1> 
«div id-"sectioni"»«h2»Normal Lists</h2> 
«ul»«li class="custom">List item with custom bullet«/li» 
«li class="circle">List item with circle bullet«/li» 
«li class="decimal">List item with numbered bullet«/li» 
«li class="inside">List item with disc bullet displayed inside the margin«/li» 
«li class-"none"»«span class-"marker"»-«/span»faux marker«/li» 
«li class="none"><span class-"marker"»8&ndash;«/span»&amp;ndash;«/li» 
«li class="none"><span class-"marker"»8mdash;«/span»&amp;mdash;«/li»«/ul»«/div» 
«div id-"section2"»«h2»Faux Lists«/h2» 
«span class-"listed"»display:list-item«/span» 
«p class-"list"»«span class="marker">1:8-5</span>faux marker«/p» 
«p class-"list"»«span class-"marker"»8middot;«/span»&amp;middot;«/p» 
«p class-"list"»«span class-"marker"»8bull;«/span»&amp;bull;«/p» 
«p class-"list"»«span class-"marker"581oz;«/span»&amp;loz;«/p» 
«p class-"list"»«span class-"marker"»8rsaquo;«/span»&amp;rsaquo;«/p» 
«p class-"list"»«span class-"marker"»8raquo;«/span»&amp;raquo;«/p»«/div» 





CSS 


ul ( margin-left:0; padding-left:0; } /* Normalized list */ 
ul li ( margin-left:60px; } 


*.listed { margin-left:60px; display:list-item; list-style:square; } 


*.list ( margin-left:60px; } 
*.marker ( float:left; margin-left:-60px; width:60px; text-align:center; ) 


.custom { list-style-image:url("check.gif"); } 
.circle { list-style-type:circle; } 

.decimal { list-style-type:decimal; } 

.inside { list-style-position:inside; } 

none ( list-style-type:none; } 


* * * o X ¥ 


/* Nonessential rules are not shown. */ 


Lists 


Problem 


Solution 


Patterns 


Related to 


See also 


CHAPTER 13 = BLOCKS 


You want to lay out a block as a bulleted or numbered list. 


You can embed content in list items (<li>). You can embed list items in 
unordered (bulleted) lists (<ul>) or ordered (numbered) lists (<ol>). 


You can use the list-style-type property to assign the type of marker displayed 
to the left of a list item. The bullet markers include disc (the default), circle, and 
square. The numbered markers that work in all major browsers include decimal 
(the default), lower-alpha, upper-alpha, lower-roman, and upper-roman. Using 
list-style-type, you can even force numbered list items to display bullets and 
vice versa! You can hide the marker using list-style-type:none. 


You can use list-style-image to display an image in place of the marker. 
In the example, the marker-custom class uses the rule list-style- 
image:url("check.gif") to display a check-mark image as the marker. 


You can use list-style-position:inside to place the marker inside the list's 
margin, which allows subsequent lines to wrap under the marker. 


You can use display:list-item to render any block or inline element as a list 
item, and a browser will display a marker in its left margin. You can apply any 
list-style rule to the element to style the marker. This can be useful when 
you have inline elements in MicroFormats that you want to style as lists (see 
http: //microformats.org for more information on using MicroFormats). 


All major browsers indent lists by 40 pixels, but they differ in how they do it. 
Some set margins to 40 pixels, and others set padding. For consistent results, you 
can assign margin-left:0; and padding-left:0; to «ul» and «ol», and you can 
assign margin-left:WIDTH to list items (<li>). You can increase the left margin to 
make more room for markers, as I did in the example. 


You can create a faux marker by wrapping any content you want in a span. This 
allows you to use any text as a marker, and you can style it in any way! You can 
use float:left to float the span to the left. You can use margin-left: -WIDTH to 
move it into the left margin the same distance as its width and its parent's left 
margin. You can also align its content to center. 


HTML 
<ul><li> CONTENT </li></ul> 
or «ol»«li» CONTENT «/li»«/ol» 
or «ul»«li» «span class-"faux-marker"» MARKER «/span» «/li»«/ul» 
or «ELEMENT class-"listed"» CONTENT </ELEMENT> 
Or «PARENT class-"list"» 
«CHILD class="marker"> MARKER «/CHILD» CONTENT </PARENT> 


CSS 
ul ( margin-left:0; padding-left:0; } 

ul li ( margin-left:WIDTH; } 

*.listed ( margin-left:WIDTH; display:list-item; list-style:disc; } 
* list ( margin-left:WIDTH; } 

* marker ( float:left; margin-left:-WIDTH; width:WIDTH; } 


Structural Meaning, Visual Structure, Background Bulleted, Inlined; Structural 
Block Elements, Multi-purpose Block Elements (Chapter 2); Display, Block Box 
(Chapter 4); Margin, Padding (Chapter 6); Float and Clear, Relative Float 
(Chapter 7); Offset Float (Chapter 8); Rollup, Tab Menu, Tabs, Flyout Menu, 
Layout Links (Chapter 17) 
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Background Bulleted 


©) Background Bulleted - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Background Bulleted 


VY Unordered list item with a background bullet 
Ordered list item with a background bullet 


. Definition term with a background bullet 
Definition data with a background bullet 


^ Faux list with a background bullet 
Faux list with a background bullet 





HTML 


«hi»Background Bulleted</h1> 


«ul class="bb-list"> 
«li class="bb1">Unordered list item with a background bullet«/li»«/ul» 


«ol class="bb-list"> 
«li class="bb2">0rdered list item with a background bullet«/li»«/ol» 


«dl class="bb-list"> 
«dt class="bb1">Definition term with a background bullet</dt> 
«dd class="bb2">Definition data with a background bullet«/dd»«/dl» 





«div class="bb-list"> 
«p class="bb1">Faux list with a background bullet«/p» 
«p class="bb2">Faux list with a background bullet«/p»«/div» 


CSS 


.bb-list ( padding-left:40px; margin-left:0; margin-top:20px; } 

.bb-list li, 

.bb-list dt, 

.bb-list dd, 

.bb-list p ( padding-left:40px; margin-left:-40px; list-style-type:none; 
margin-top:0; margin-bottom:0; } 


* + * * X 


*.bb1 ( background:url("check.gif") no-repeat 10px 1px; } 
*.bb2 ( background:url("star.gif") no-repeat 10px 1px; } 
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Background Bulleted 


Problem 


Solution 


Pattern 


Related to 
See also 


You want to control the precise placement of a list item's bullet. 


Since CSS does not provide properties for controlling the position of a bullet, 
you can use a background image as the bullet of each list item, and you can use 
background-position to position it precisely. 


You can assign a positive left padding to a list element (<ol>, <ul>, or <dl>) to 
make room for bullets on its list items. You should also remove the default 
left margin that some browsers add to lists. In the example, I assigned 
padding-left:40px and margin-left:0 to each list. 


You can assign a negative left margin to each list item to move it into the padding 
area of its parent list. The negative left margin should be the exact inverse of the 
amount assigned to the left padding of its parent. In the example, I assigned 
margin-left:-40px to each list item. 


You can assign the exact amount of left padding to each list item that you 
assigned to its parent list. This moves a list item's content away from the bullet. 
In the example, I assigned padding-left:40px to each list item. You should also 
hide each list item's built-in marker using list-style-type:none. 


You can assign a nonrepeating background image to each list item and use 
background-position to offset its position. In the example, I used a left offset of 
10 pixels and a top offset of 1 pixel. You can use different classes as needed to 
assign and position different background images to individual list items. 


You can assign the bb-list class to each list. This distinguishes between normal 
lists and background-bulleted lists, which is important because they each have 
different values for margin and padding. You can combine *.bb-list with the 
descendant operator and a list-item element to select background-bulleted list 
items. Since there are three different types of list-item elements, you can use the 
grouping operator to assign multiple selectors to this pattern's rules. 


Since a list item is a block element, this pattern applies to all block elements. 
Nonetheless, it is better to mark up items as a list when they function as a list. 
In the example, I applied this pattern to a division and its child paragraphs, but 
only to show how it can be done—not to recommend that you do it. 


HTML 
«LIST class="bb-list"> 

«LIST ITEM class-"BULLET STYLE"» list content «/LIST ITEM» 
«/LIST» 


CSS 
*.bb-list ( padding-left:+INDENT; margin-left:0; } 


*.bb-list li, *.bb-list dt, *.bb-list dd,*.bb-list p 
{ padding-left:+INDENT; margin-left:-INDENT; list-style-type:none; } 


* BULLET STYLE { background: url("FILE.EXT") LEFT OFFSET 
TOP OFFSET no-repeat; } 
Lists; Block Box (Chapter 4); Margin, Padding, Background (Chapter 6) 
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Inlined 


© Inlined - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Inlined 


Normal Paragraph | 


Normal Table | ric2 |as 
row2 | r2c2 |ze3 | 

















* Normal List | 
* Normal List | 








Inlined Table | 
Inlined Paragraph row2 | Inlined List] | Inlined List] 

















HTML 


<h1>Inlined</h1> 
<div> 
<p>Normal Paragraph</p> 
«table»«tr»«td»Normal Table</td><td>r1c2</td><td>r1c3</td></tr> 
«tr»«td»row2«/td»«td»r2c2«/td»«td»r2c3«/td»«/tr»«/table» 
«ul»«li»Normal List«/li»«li»Normal List«/li»«/ul»«/div» 





«div» 
«p class-"inlined"»Inlined Paragraph«/p» 
«table class-"inlined"» 
<tr><td>Inlined Table«/td»«td»ric2«/td»«td»ric3«/td»«/tr» 
«tr»«td»row2«/td»«td»r2c2«/td»«td»r2c3«/td»«/tr»«/table» 
«ul class-"inlined"»«li class-"inlined"»Inlined List«/li» 
«li class-"inlined"»Inlined List«/li»«/ul»«/div» 


CSS 


div ( padding:10px; margin-bottom:15px; border:2px solid black; } 
table, p, td, ul, li ( margin-top:Opx; margin-bottom:10px; padding-right:5px; } 
p, td, ul, li ( background-color:gold; padding-top:5px; padding-bottom:5px; 
border-left:ipx solid gray; border-right:2px solid black; 
border-top:ipx solid gray; border-bottom:2px solid black; ] 


*.inlined ( display:inline; line-height:normal; padding:5px; margin:5px; ) 


Inlined 


Problem 


Solution 


Pattern 


Location 


Limitations 


Advantages 


Tips 


Example 
Related to 


See also 


CHAPTER 13 = BLOCKS 


You want the browser to render a block element as if it were an inline element. 
In other words, you want a block element to be displayed inline. 


CSS provides display:inline for this purpose. You can assign this rule to any 
element to display it inline. Since margin and padding work differently inline, you 
often need to adjust the margin and padding to work inline. This is particularly 
true for lists displayed inline. Since height does not work inline, you can use 
line-height in its place. 


SELECTOR { display:inline; line-height:+VALUE; 
margin:+VALUE; padding:+VALUE; } 


This pattern applies to any type of element. 


Firefox 2 and Opera 9 do not properly format the border and background of a 
table displayed inline, but they do properly format the border and background 
of table cells. 


Internet Explorer 6 and 7 do the best job of rendering an entire table inline, but 
they cannot break down a table and render its rows and cells inline. 


List items lose their bullets and numbers when inlined. 


Inlining a block element allows it to be rendered from left to right (or right to left 
in some languages) and wrapped to additional lines as needed. This is the most 
compact way to display elements. 


Rendering a table inline can be useful when you have a few rows of tabular data 
that you want to flow along with other inline content. The table retains its 
internal structure of rows and columns, but is located in the inline formatting 
context. A table rendered inline is very similar to an inline block: both are 
rendered as blocks within an inline formatting context. 


Since Firefox 2 does not support display: inline-block, which displays an inline 
element as a block with inline formatting context, you can instead assign 
display: inline to a table, which creates the same visual effect. This is not quite 
as useful as display: inline-block because it requires you to insert a table in 
your markup. 


When a parent block is inlined, its child blocks must be inlined too, or they will 
break out of the inline formatting context and create new block formatting 
contexts. For example, list elements need to be inlined along with their list 
container. (This does not apply to rows and cells of inlined tables.) 


The first division in the example contains a paragraph, a table containing two 
rows of cells, and a list containing two list items. The second division contains 
the same elements, but each element is inlined. 


Run-in; Display, Inline Box, Inline-block Box (Chapter 4); Blocked (Chapter 11); 
Tabled, Rowed, and Celled (Chapter 15); Flyout Menu (Chapter 17); Hanging 
Alert, Run-in Alert (Chapter 20) 
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Collapsed Margins 


© Collapsed Margins - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Collapsed Margins 


E- Margins collapsed into parent's 7; 


Margins not collapsed into parent's ^; 


Collapsed sibling margins | 


Collapsed sibling margins * 


Uncollapsed (transparent padding) t} 


Uncollapsed (transparent border) * 





HTML 


«hi»Collapsed Margins</h1> 
<div><p class-"collapsed"»Margins collapsed into parent's &uarr;&darr;</p></div> 
<div class="border"> 

«p class-"collapsed"»Margins not collapsed into parent's &uarr;&darr;</p></div> 


<div class="border"> 
<p class-"collapsed"»Collapsed sibling margins &darr;</p> 
«p class-"collapsed"»Collapsed sibling margins &uarr;</p> 
«p class-"uncollapsedi"»Uncollapsed (transparent padding) &uarr;&darr;</p> 
«p class-"uncollapsed2"»Uncollapsed (transparent border) 8uarr;«/p»«/div» 


CSS 


div ( margin:10px; padding-left:30px; background-color:gold; 
background-image: url("ruler.gif"); background-repeat:repeat-y; } 
*.border ( border:2px solid black; ] 


*.collapsed { margin-top:20px; margin-bottom:20px; } 


*.uncollapsedi ( margin-top:0; margin-bottom:0; 
padding-top:20px; padding-bottom:20px; 
background-color:transparent; ) 


*.uncollapsed2 ( margin-top:0; margin-bottom:0; 
border-top:20px solid transparent; 
border-bottom:20px solid transparent; } 
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Collapsed Margins 


Problem 


Solution 


Patterns 


Location 


Limitations 


Disadvantage 
Related to 


See also 


You want to collapse or uncollapse vertical margins between blocks. 


Browsers collapse vertical margins into the larger of the bottom and top 
margins between sibling blocks. For example, if the bottom margin of one 
block is 15 pixels and the top margin of the next sibling block is 10 pixels, the 
collapsed margin is 15 pixels (the uncollapsed margin is 25 pixels). 


You can literally prevent the collapsing of the first child's top margin into its 
parent's top margin by assigning a top padding or a top border to the parent. 
Likewise, you can prevent the collapsing of the last child's bottom margin into 
its parent's bottom margin by assigning bottom padding or a bottom border 
to the parent. You can hide the padding or border by making it transparent 
and as small as one pixel. In the example, the vertical margins of the second 
paragraph do not collapse into its parent because its parent has top and 
bottom borders. 


You cannot prevent vertical margins from collapsing between sibling blocks. If 
you want to avoid the collapsing effect between siblings, you can set margins 
to zero and use transparent borders or transparent padding instead. Borders 
and padding do not collapse. 


When a parent block does not have a border, the top margin of its first child 
collapses into its top margin. Likewise, the bottom margin of the last child 
collapses into the parent's bottom margin. 


Uncollapsed Margins Between Parent and Child Blocks 

PARENT SELECTOR { border-top: WIDTH STYLE COLOR; 
border-bottom: WIDTH STYLE COLOR; 
padding-top:+VALUE; padding-bottom:+VALUE; } 


Uncollapsed Margins Between Sibling Blocks 

SIBLING SELECTOR { padding-top:+VALUE; margin-top:0; 
padding-bottom:+VALUE; margin-bottom:0; 
background-color:transparent; } 

or 

SIBLING SELECTOR { margin-top:0; margin-bottom:0; 
border-top:+VALUE solid transparent; 
border-bottom:+VALUE solid transparent; 
background-color:transparent; } 





This pattern applies to block elements and elements displayed as blocks. 


Internet Explorer 6 supports transparent padding, but it does not support 
transparent borders. If you need to use borders to create uncollapsed 
margins, you have to match the color of the border to the background color, 
which does not work if the background is an image. Internet Explorer 7 does 
not have this limitation. 


Using padding or borders to prevent collapsing margins prevents you from 
using padding and borders for what they were intended. 


Horizontal Rule, Block Spacer, Block Space Remover; Margin, Border, Padding 
(Chapter 6); Spacing, Blocked (Chapter 11), Collapsed Borders (Chapter 15) 
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CHAPTER 13 BLOCKS 


Run-in 


© Run-in - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Run-in 





Normal Heading 


This is a paragraph following the heading. Notice how the previous heading 
and this paragraph are separate blocks. 


This is another paragraph following the first paragraph. 





Run-in Heading This is a paragraph following the heading. 
Notice how the heading runs into the first line of this paragraph, and notice 
how its styles are transferred to the run-in container. 


This is another paragraph following the first paragraph. 








HTML 


<h1>Run-in</h1> 
<div class="section"> 
<h2>Normal Heading</h2> 
<p class="indent">This is a paragraph following the heading. Notice 
how the previous heading and this paragraph are separate blocks .</p> 
«p»This is another paragraph following the first paragraph.«/p»«/div» 


«div class="section"> 
«div class-"run-in-container indent"> 
«h2 class-"run-in"»Run-in Heading</h2> 
«p class-"run-in"»This is a paragraph following the heading. Notice how 
the heading runs into the first line of this paragraph, and notice how 
its styles are transferred to the run-in container.«/p» 
</div> 
<p>This is another paragraph following the first paragraph.</p></div> 


CSS 


*.section ( padding:10px; margin-bottom:20px; background-color:gold; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:1px solid gray; border-bottom:2px solid black; } 

*.indent { margin-left:20px; border-left:4px solid black; padding-left:20px; } 


*.run-in { display:inline; } 
*.run-in-container h2 { padding-right:20px; } 
*.run-in-container p { font-style:italic; } 


Run-in 


Problem 


Solution 


Pattern 


Location 


Tips 


Example 


Related to 
See also 
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You want to run a block into the following sibling block as if it were an inline 
element within the following block. For example, you may want to run a heading 
into the following paragraph for a more compact presentation. You may also 
want to run a series of blocks into another block. 


CSS provides the rule display: run-in for this purpose, but only Opera, Safari, 
and Konquerer support it. You can implement a run-in by wrapping the run-in 
block and the destination block inside a container block. You can then assign 
display: inline to these two blocks to render them inline. Displaying them inline 
causes the run-in block to merge into the first line of the destination block. By 
wrapping both blocks in a container block, you can transfer any block styles to 
the container block that you would have applied to the destination block, such 
as margins, borders, padding, or a background. 


If you want to run multiple blocks into a final block, you can assign the entire 
series of blocks to display: inline and wrap them all in one block. 


Of course, it would be much better if Internet Explorer and Firefox simply 
implemented run-ins. 


HTML 
«RUN IN CONTAINER BLOCK» 
«RUN IN BLOCK» content «/RUN IN BLOCK» 
«DESTINATION BLOCK» content «/DESTINATION BLOCK» 
«/RUN IN CONTAINER BLOCK» 


CSS 
RUN IN BLOCK SELECTOR { display:inline; } 
DESTINATION BLOCK SELECTOR { display:inline; ) 


This pattern applies to block elements. 


Because the run-in container encloses the run-in and destination blocks, you 
can take advantage of descendant selectors to apply additional styles to the 
run-in block and the destination block. 


This design pattern works even if you do not wrap the run-in and destination 
blocks in a container block. Since the run-in and destination blocks are 
displayed inline, the browser creates an anonymous block box to hold them. The 
problem with the anonymous block box is that you cannot transfer any block 
styles from the destination block to the anonymous block box. This is only a 
problem if you have block styles you need to transfer, such as margins, borders, 
padding, or a background. 





In the example, I transferred the indent class from the destination paragraph to 
the run-in container. I also used a descendant selector to insert extra padding 
between the run-in heading and the destination paragraph. Using another 
descendant selector, I styled the destination paragraph as italic. 


Section, Inlined; Run-in Alert (Chapter 20) 
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Horizontal Rule 


E Horizontal Rule - Microsoft Internet Explorer 
File Edit View Favorites Tools Help 





Horizontal Rule 


This paragraph is followed by a standard horizontal rule. | 








This paragraph is followed by an embedded and styled horizontal rule. | 


This paragraph is preceded by an embedded and styled horizontal rule. | 











HTML 


«hi»Horizontal Rule«/hi» 

<p>This paragraph is followed by a standard horizontal rule.«/p» 

«hr /> 

«p»This paragraph is followed by an embedded and styled horizontal rule.«/p» 
«div class-"hr"»«hr /»«/div» 


<p>This paragraph is preceded by an embedded and styled horizontal rule.«/p» 





CSS 


* 


.hr ( height:40px; width:200px; 

margin:O auto O auto; 

border:0; 

background:url("hr.gif") repeat-x left center; 
line-height:1px; font-size:1px; } 


* 


.hr hr { display:none; } 


/* Nonessential rules are not shown. */ 
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Horizontal Rule 


Problem 


Solution 


Patterns 


Location 
Related to 
See also 


You want to insert a horizontal rule between block elements to indicate the 
beginning of a new section. You want the horizontal rule to insert styled vertical 
space between blocks in the normal flow. You want to style the horizontal rule 
with margins, borders, background colors, and tiled images. 


HTML provides the «hr /» element for this purpose. Browsers render it as a gray, 
2-pixel tall, 3D stretched line. Each browser uses a different shade of gray and a 
slightly different amount for the vertical margins. 


You can style its margins, borders, padding, and background color just like you 
would style any block. If you give it a nonzero height, you can even assign it a 
background image. Unfortunately, Internet Explorer 7 and earlier versions do 
not properly apply box model rules to the horizontal rule, such as padding. And 
worse, Internet Explorer adds extra vertical margins and interior borders that 
you cannot remove. This makes styling the horizontal rule the same in all major 
browsers impossible. 


If you want to style a horizontal rule and have it work in Internet Explorer, it is 
best to embed the horizontal rule within a division, hide the rule, and style the 
division instead. You can use display:none to hide the embedded horizontal rule. 
Because the horizontal rule is still present, a browser that does not use CSS will 
still display a horizontal rule, and the semantic meaning of the horizontal rule is 
preserved. 


You can use width and horizontal margins to align, indent, and offset the parent 
division. You can use height to set its height. You can use margin-top and 
margin-bottom to insert transparent space above and below the division. You 
can render a styled line across the width of the division using border-top and 
border-bottom. You can also use the background properties to show or tile an 
image across the division. 


HTML 

«hr /» 

or 

«div class="hr"><hr /></div> 


CSS 
*.hr ( width:+VALUE; 
height :+VALUE ; 
margin:+VALUE; border: WIDTH STYLE COLOR; 
background:COLOR IMAGE REPEAT H POSITION V_POSITION; } 
*.hr hr { display:none; } 
This pattern applies to horizontal rules. 
Block Spacer; Linebreak, Inline Horizontal Rule (Chapter 11) 
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Block Spacer 


Block Spacer - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Block Spacer 


This paragraph is not followed by a block spacer. 
This paragraph is followed by a block spacer. 











This paragraph is preceded by the same block spacer. 
This paragraph is not preceded by a block spacer. 


HTML 





<h1>Block Spacer</h1> 


<p>This paragraph is not followed by a block spacer.</p> 
<p>This paragraph is followed by a block spacer.</p> 


<div class="spacer-large"></div> 


<p>This paragraph is preceded by the same block spacer.</p> 
<p>This paragraph is not preceded by a block spacer.</p> 





CSS 
p ( margin:0; padding:5px; background-color:gold; 


border-left:1px solid gray; border-right:2px solid black; 
border-top:ipx solid gray; border-bottom:2px solid black; } 


*.spacer-large ( padding-bottom:32px; } 
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Block Spacer 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Tips 


Related to 


See also 


You want to put space between two blocks to show that they do not belong 
together. You want the separation to imply that a new series of thoughts 
follows, but unlike the horizontal rule, you do not want to imply that a whole 
new section follows. You want the structure of the markup to mirror the 
structure of the content, which has a slight separation of thought. You also 
want to control the amount of vertical space inserted—the more space, the 
stronger the structural separation of content. 


You can insert an empty division between the blocks. You can assign a specific 
amount of bottom or top padding to the division to insert the desired amount 
of space. 


Since the purpose of this design pattern is to separate two blocks, the class 
name you assign to the block spacer element should reflect this purpose. 


HTML 
«div class="CLASS"></div> 


CSS 
*.CLASS ( padding-bottom:+VALUE; } 


This pattern applies to block elements. 


The block spacer is best used when you want the markup to communicate a 
separation between blocks because this reflects the meaning of the content. 
Itis a simple, reliable, and semantic way to insert extra vertical space between 
any two blocks. 


This design pattern requires an extra element to be inserted into the markup. 
You may be tempted to use this for visual effects rather than for its structural 
purpose. In that case, you should assign a margin to one of the blocks. 


Because a block spacer is inserted between two elements, it has the side effect 
of stopping the previous block's bottom margin from collapsing into the 
following block's top margin. Thus, you can insert a 1-pixel block spacer 
between blocks to uncollapse their margins (and add one extra pixel of 
space). Note that a zero-pixel block spacer does not uncollapse margins. 


You could insert the padding-bottom rule directly inside the style attribute 
of the spacer division. I recommend against this because you will likely need 
to change this value as margins in the stylesheet change. I find it speeds 
software development to keep all style rules in stylesheets. I also avoid using 
class names that imply specific measurements, such as spacer32px, because 
the amount of space removed is likely to change. 


Visual Structure, Block Space Remover, Horizontal Rule; Padding (Chapter 6); 
Spacing, Inline Spacer, Linebreak, Inline Horizontal Rule (Chapter 11) 
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Block Space Remover 


© Block Space Remover - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Block Space Remover 





This paragraph has 32-pixel top and bottom margins. 





This paragraph has 32-pixel top and bottom margins. 


This paragraph has 32-pixel top and bottom margins, but it is preceded and 
followed by a block space remover. 


This paragraph has 32-pixel top and bottom margins, but it is preceded and 
followed by a block space remover. 





HTML 


<h1>Block Space Remover</h1> 
<div class="section"> 
<p>This paragraph has 32-pixel top and bottom margins.</p> 


<p>This paragraph has 32-pixel top and bottom margins.</p> 
</div> 


<div class="section"> 
<div class="space-remover-large"></div> 
<p>This paragraph has 32-pixel top and bottom margins, 
but it is preceded and followed by a block space remover.</p> 
<div class="space-remover-large"></div> 
<p>This paragraph has 32-pixel top and bottom margins, 
but it is preceded and followed by a block space remover.</p> 
<div class="space-remover-large"></div> 
</div> 


CSS 


*.section { border:2px solid black; margin-bottom:32px; } 

p { margin-top:32px; margin-bottom:32px; padding:5px; background-color:gold; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:1px solid gray; border-bottom:2px solid black; } 


*.space-remover-large { margin-top:-32px; } 
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Block Space Remover 


Problem 


Solution 


Pattern 


Location 


Explanation 


Advantages 


Disadvantages 


Example 


Related to 


See also 


You want to bring two blocks closer together because they are closely related. 
You also want to remove a precise amount of space between blocks based on 
their location in the markup. For example, you want to remove some or all 
ofthe top margin before the first child element in a block; or you want to 
remove some or all of the bottom margin after the last child element in a 
block; or you want to remove some or all of the margin between two 

specific blocks. 


To remove vertical space between any two blocks, you can insert an empty 
division between the blocks. You can assign a negative top margin to the 
division to remove the desired amount of space. For example, if you want 
to remove 32 pixels of space, you can insert a division assigned to the rule 
margin-top:-32px. 


HTML 
«div class="CLASS"></div> 


CSS 
*.CLASS ( margin-top:-VALUE; } 


This pattern applies to block elements. 


This pattern is the opposite of the Block Spacer design pattern and has the 
exact opposite structural meaning. By drawing two blocks closer together, the 
markup indicates they are more closely related. The class name you assign to 
the block space remover element should reflect this purpose. 


Furthermore, the structural relationship created by a block space remover or 
block spacer element does not belong to either block. It belongs in between 
the blocks because it links or separates them. It is best to use structural 
markup to create structural meaning because it is easiest to maintain—you 
can see it and manipulate it directly in the HTML. 


Unlike the block spacer, the block space remover does not uncollapse 
margins. This makes using the block spacer remover simpler and more 
predictable. 


This design pattern requires an extra element to be inserted into the markup 
for each space you want to remove. If you remove too much space, you can 
cause blocks to overlap. 


In the example, each paragraph has been assigned to top and bottom margins 
of 32 pixels. The two paragraphs in the second section are preceded and 
followed by block space removers, which remove the space before, between, 
and after these paragraphs. 


Visual Structure, Collapsed Margins, Block Spacer; Margin (Chapter 6) 
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Left Marginal 


© Left Marginal - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Left Marginal 


Problem You want to excerpt an element and move it into the 
You meester put . left margin. You want it to align vertically with 
images and notes in R n 
the margin. where it would have been placed in the flow. 
Solution You can create a large left margin and use absolute 
positioning to move content into it. 


Disadvantages Nothing prevents marginal elements from vertically 
OVERLAP! overlapping each other. However, you can prevent 
marginal elements from overlapping with content on 
the right by creating a wide enough left margin. 


Advantages * You can render inline markup like tables. 





HTML 


«hi»Left Marginal</h1> 

«p class-"left-marginal"»«span class-"marginal-header"»Problem«/span»You want to 
excerpt an element and move it into the left margin.«span class="marginal-note"> 
You want to put images and notes in the margin.«/span» You want it to align 
vertically with where it would have been placed in the flow.«/p» 

«p class-"left-marginal"»«span class-"marginal-header"»Solution«/span»You can 
create a large left margin and use absolute positioning to move content 
into it.«br /»«br /» «span class="marginal-header">Disadvantages</span> 
Nothing prevents marginal elements from vertically overlapping each other. 
«span class-"marginal-alert"»OVERLAP! </span> 
However, you can prevent marginal elements from overlapping with content on 
the right by creating a wide enough left margin. «br /»«br /» 
«span class-"marginal-header"»Advantages«/span»«img class-"marginal-flag" 
src-"star.gif" alt-"star"/»You can render inline markup like tables.«/p» 





CSS 


*.left-marginal ( position:relative; width:480px; 

margin-left:230px; margin-right:auto; ) 
*.marginal-header { position:absolute; left:-220px; width:160px; font-weight:bold; } 
*.marginal-note ( position:absolute; left:-180px; width:150px; 

font-style:italic; font-size:14px; font-weight:normal; } 
*.marginal-alert { position:absolute; left:-180px; font-style:italic; } 
*.marginal-flag ( position:absolute; left:-40px; margin-top:-5px; } 


CHAPTER 13 = BLOCKS 279 


Left Marginal 


Problem 


Solution 


Pattern 


Location 


Caution 


Tips 


Related to 


See also 


You want to excerpt elements out of the normal flow and move them into the left 
margin. These elements could contain headers, notes, tips, alerts, comments, 
images, and so on. You want elements in the margin to be positioned vertically 
where they would have been in the flow. You do not mind using fixed widths. 


You can indent a block to create a margin on the left and then use absolute 
positioning to remove elements from the normal flow into the margin. 


You can mark up a block element with the left-marginal class to make it easy to 
select. You can indent it using margin-left. You can set it to position:relative, 
position: absolute, or position: fixed so its children can be positioned relative 
to its margin. You can use margin-right: auto and width to fix the width of the 
block so that content does not reflow when the viewport resizes. Reflow may 
change the vertical location of marginal elements, which could cause them to 
overlap. 


You can mark up a marginal element with a class that describes its purpose, such 
as marginal-header, marginal-note, and so forth. You can use position:absolute 
to remove the element from the flow, and you can use a negative value in left to 
move it into the left margin. You can use margin-top to move the element up or 
down. You can use width to size the element to fit into the width of the margin. 


HTML 
«TERMINAL-BLOCK class-"left-marginal"» 
<INLINE-TEXT class-"marginal-TYPE"» text </INLINE-TEXT> 
<img class-"marginal-TYPE" src-"FILE.EXT" alt-"ALT TEXT" /> 
«/TERMINAL -BLOCK» 


CSS 
*.left-marginal ( position:relative; width:+VALUE; 
margin-left:+VALUE; margin-right:auto; } 


*.marginal-TYPE { position: absolute; 
left: -VALUE; 
width: +VALUE; 
margin-top: +VALUE; } 





This pattern works on any element. 


The layout created by this pattern does not protect elements from overlapping in 
the margin. It is easy to move an element into the margin and have it overlap 
other elements in the margin. Also, a browser that does not support absolute 
positioning renders marginal text inline where it occurs. 


You can combine this pattern with Right Marginal. 


This pattern is visually similar to HTML tables, but the markup is more flexible. 
You can pull out any element and move it into the margin. 


Right Marginal; Box Model (Chapter 4); Margin (Chapter 6); Positioning Models, 
Positioned, Closest Positioned Ancestor, Absolute, Relative (Chapter 7); Offset 
Absolute and Offset Fixed (Chapter 8); Marginal Dropcap, Marginal Graphic 
Dropcap (Chapter 18); Left Marginal Callout (Chapter 19); Left Marginal Alert 
(Chapter 20) 
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Right Marginal 


© Right Marginal - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Right Marginal 


You want to excerpt an element and move it to the Problem 
right margin. You want it to align vertically with You want to put 


: à images and notes in 
where it would have been placed in the normal flow. the margin: 


You can create a large right margin and use absolute Solution 
positioning to move content into it. 


Nothing prevents marginal elements from vertically Disadvantages 
overlapping each other. However, you can prevent OVERLAP! 
marginal elements from overlapping with content on 

the left by creating a wide enough right margin. 


You can render inline markup like tables. ( Advantages 





HTML 


«hi»Right Marginal«/hi» 

«p class-"right-marginal"»«span class="marginal-header">Problem</span>You want to 
excerpt an element and move it to the right margin. «span class="marginal-note"> 
You want to put images and notes in the margin.«/span» You want it to align 
vertically with where it would have been placed in the normal flow.«/p» 

«p class-"right-marginal"»«span class="marginal-header">Solution</span>You can 
create a large right margin and use absolute positioning to move content 
into it.«br /»«br /» «span class="marginal-header">Disadvantages</span> 
Nothing prevents marginal elements from vertically overlapping each other. 
«span class="marginal-alert" >OVERLAP! </span> 
However, you can prevent marginal elements from overlapping with content on 
the left by creating a wide enough right margin. <br /><br /> 
«span class-"marginal-header"»Advantages«/span»«img class-"marginal-flag" 
src-"star.gif" alt-"star"/»You can render inline markup like tables.«/p» 





CSS 


body ( width:702px; ) 
*.right-marginal ( position:relative; width:480px; 
margin-right:210px; margin-left:auto; ) 


*.marginal-header {position:absolute; right:-230px; width:170px; font-weight:bold; } 
*.marginal-note ( position:absolute; right:-230px; width:150px; 

font-style:italic; font-size:14px; font-weight:normal; } 
*.marginal-alert {position:absolute; right:-230px; width:150px; font-style:italic; } 
*.marginal-flag ( position:absolute; right:-30px; margin-top:-5px; ] 


CHAPTER 13 = BLOCKS 281 


Right Marginal 


Problem 


Solution 


Pattern 


Location 
Caution 


Tips 


Related to 


See also 


You want to excerpt elements out of the normal flow and move them into 

the right margin. These elements could contain headers, notes, tips, alerts, 
comments, images, and so on. You want elements in the margin to be positioned 
vertically where they would have been in the flow. You do not mind using fixed 
widths. 


You can indent a block to create a margin on the right and then use absolute 
positioning to remove elements from the normal flow into the margin. 


You can mark up a terminal block element with the right-marginal class to 
make it easy to select. You can indent it using margin-right. You can set it to 
position: relative, position: absolute, or position: fixed so its inline children 
can be positioned relative to its margin. You can use margin-left:auto and width 
to fix the width of the terminal block so that the content does not reflow when 
the viewport resizes. Reflow may change the vertical location of marginal 
elements, which could cause them to overlap. You can set the width of <body> or 
the width of one of the terminal block’s ancestors to a fixed measurement to 
prevent the block from moving to the right as the viewport grows larger. 


You can mark up a marginal element with a class that describes its purpose, such 
as marginal-header, marginal-note, and so forth. You can use position: absolute 
to remove the inline element from the flow, and you can use a negative value in 
right to move it into the right margin. You can use margin-top to move the inline 
element up or down. You can use width to size the inline element to fit into the 
width of the margin. 


HTML 
<TERMINAL-BLOCK class="right-marginal"> 
<INLINE-TEXT class="marginal-TYPE"> text </INLINE-TEXT> 
<img class-"marginal-TYPE" src-"FILE.EXT" alt-"ALT TEXT" /> 
«/TERMINAL -BLOCK» 
CSS 
*.right-marginal { position:relative; width:+VALUE; 
margin-right:+VALUE; margin-left:auto; } 





*.marginal-TYPE { position: absolute; 
right: -VALUE; 
width: «VALUE; 
margin-top: +VALUE; } 


This pattern works on any element. 


The layout created by this pattern does not protect elements from vertically 
overlapping in the margin. You need to plan carefully to avoid this problem. 


You can combine this pattern with Left Marginal. 


This pattern is visually similar to HTML tables, but the markup is more flexible. 
You can pull out any element and move it into the margin. 


Left Marginal; Box Model (Chapter 4); Margin (Chapter 6); Positioning Models, 
Positioned, Closest Positioned Ancestor, Absolute, Relative (Chapter 7); Offset 
Absolute and Offset Fixed (Chapter 8); Marginal Dropcap, Marginal Graphic 
Dropcap (Chapter 18); Right Marginal Callout (Chapter 19); Right Marginal Alert 
(Chapter 20) 
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Images 


This chapter shows how to use images to create beautiful and functional documents that 
remain accessible and download quickly. 


Chapter Outline 


Image shows how to use the <img> element. It also contrasts the advantages and 
disadvantages of the GIE JPG, and PNG image formats. 


Image Map shows how to overlay an image with clickable areas that link to other pages. 


Fade-out shows how to use gradient images to add subtle shading behind content. It 
also shows how to create chameleon gradients that adapt to the current background. 


Semi-transparent shows how to put a partially transparent background behind an 
element so that it stands out from the background below it without obscuring it. 


Replaced Text shows how to replace text with an image while remaining accessible to 
nonsighted users. This technique also shows the text when the image is unavailable. 


Content over Image shows how to overlay text and other images on top of an image. 


Content over Background Image shows how to overlay text and other images on top of 
a background image. 


CSS Sprite shows how to embed multiple images into one file and display them inde- 
pendently as the background of different elements of a document. 


Basic Shadowed Image shows how to create and apply a simple shadow to an image 
without modifying the image itself. 


Shadowed Image shows a generic way of applying a shadow to an image of any size. 


Rounded Corners shows how to round the corners of an element's borders and how to 
create custom borders of any style imaginable. 


Image Example showcases these patterns in one document. 
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Image 


3] Image - Mozilla Firefox 


Ele Edit View History Bookmarks Tools Help 


Image 


jpg 9996 jpg 9096 jpg 75% jpg 50% 
270KB 80KB 41KB 15KB 


At iud ad T 


gif gif dithered png greyscale png color 
153KB 205KB 219KB 264KB 


k k k 








HTML 
«img width-"742" height="556" src="cl1-99.jpg" alt-"Crater Lake 1" /> 


<!-- Nonessential markup is not shown. --> 


CSS 
img ( display:block; width:auto; height:auto; ) 


/* Nonessential rules are not shown. */ 


Example 

The example contains eight different versions of a picture that I took of Crater Lake on August 4, 
2003. The source image is 742X556 pixels with a file size of 1,238,822 bytes. I processed the 
image to create eight separate files—each with a different image type and quality. 

The first image is a JPG image at maximum quality, which reduces the file size to 
275,798 bytes. This is a reduction of 5 times. At a JPG's highest quality, it is difficult to see 
any loss of quality. The second image is a JPG at 90% quality, which reduces the file size to 
81,248 bytes. This is a reduction of 15 times. At 90% quality, you can barely see a difference 
with a magnifying glass. You can see a difference in the third and fourth images, which are 
JPGs at 75% and 50% quality and 41,290 and 14,841 bytes. This is a reduction of 30 and 
84 times. 

The fifth and sixth images are GIFs. These images have less quality and larger sizes than 
the JPG images. This is not a fair test of GIFs because they are not designed for real-world 
images containing thousands of colors. GIFs produce smaller files and have better quality 
when used for computer-generated images containing 256 or less colors. 

The seventh and eight images are PNGs. These images have the best quality with slightly 
smaller file sizes than the best-quality JPG, but there is no way to increase the compression to 
shrink the file size. 


Image 


Problem 


Solution 


Pattern 


Location 


Tips 


Related to 


See also 
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You want to insert an image into the document because it is part of the content. 


You can insert an image into your document using «img». You can use the src 
attribute to specify the URL containing the image. 


You should put a brief description of the image in the alt attribute. This 
alternative description should be written specifically for screen readers to read 
and for displaying when the image fails to download. Decorative images are best 
displayed as background images, but if you must use a decorative «img» element, 
include the alt attribute, but leave it empty. 


Because a browser downloads each image separately, it needs to know the 
image' height and width so it can create a placeholder for the image while the 
image downloads. Otherwise, after each image is downloaded and its real size 
becomes known, a browser has to reflow the page. This slows the rendering 
and annoys the user. To set an image's size, you can use the width and height 
attributes of «img» or the width and height CSS properties. There is no need to 
use both. CSS properties override HTML attributes. 


HTML 
«img src-"FILE.EXT" width-"IMAGE WIDTH" height-"IMAGE HEIGHT" 
alt-"BRIEF IMAGE DESCRIPTION" /» 


This pattern applies to images. 


An image is an inline element. It vertically aligns to the baseline of the line in 
which it occurs. You can use vertical-align to adjust the alignment. 


When you want to treat an image as a block, you should use display:block to 
display it as a block. This removes a small amount of extra space that a browser 
places below an image when it is inline, and it preserves the image’s size when it 
fails to download. 


JPG, GIE and PNG are the most common types of images on the Internet. 


JPG is the best image format for photographs. JPG supports up to 16 million 
colors and lossy compression. You control the amount of lossy compression from 
none to extreme. More compression produces smaller files and poorer quality. 
JPG does not support transparency. 


GIF is the best image format for line art and computer-generated images. GIF 
supports a transparent background, but it does not support an alpha channel. 
GIF supports up to 256 colors in the palette. To get more colors, a graphics 
program may use dithering to simulate them. GIF uses lossless compression. 
You cannot control the amount of compression. The main problem with GIF is 
its limit of 256 colors and its lack of an alpha channel. 


PNG is an improvement over GIE It supports alpha channel transparency, 
16 million colors, grayscale, and palette-based colors. PNG uses lossless 
compression, which you cannot control. Internet Explorer 7 and other major 
browsers support PNG transparency. Internet Explorer 6 does not. 


Image Map; Inline-block Box (Chapter 4); Width, Height, Sized, Shrinkwrapped, 
Stretched (Chapter 5); Margin, Border, Padding (Chapter 6); Vertical-aligned 
Content, Vertical-offset Content (Chapter 12); Left Marginal, Right Marginal 
(Chapter 13); Flyout Menu (Chapter 17); JavaScript Alert, Tooltip Alert, Popup 
Alert (Chapter 20) 


www. cssdesignpatterns.com/image 
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Image Map 


a Image Map - Microsoft Internet Explorer 
: File Edit View Favorites Tools Help 


Image Map 


Northwest USA 
~ 








Washington 





HTML 


<h1>Image Map</h1> 

«h2»«a id-"home" href-"example.html"»Northwest USA</a></h2> 

«img src-"nw.gif" usemap="#nw-map" alt-"Northwest USA" width-"290" height="200" /» 
«map id="nw-map" name="nw-map"> 


<area href="washington.html" alt="Washington" 
shape="poly" coords="176,8, 164,89, 75,89, 40,72, 45,8" /> 


«area href-"oregon.html" alt-"Oregon" 
shape="rect" coords="9,90, 155,180" /» 


«area href-"idaho.html" alt="Idaho" 
shape="circle" coords="212, 134,55" /> 
</map> 





CSS 


/* There are no CSS properties for styling image maps. */ 


CHAPTER 14 ™ IMAGES 


Image Map 


Problem 


Solution 


Pattern 


Location 


Tip 


Related to 
See also 


You want to overlay an image with clickable areas that link to other pages. 


You can link an image to a map element that defines clickable areas and 
associates each area with a URL. When a user clicks an area, a browser jumps to 
its associated link. You can add a usemap attribute to an image to link the image 
to the map element with the same value in its name attribute. Multiple images 
can be linked to the same map element. For easy access to the element through 
JavaScript, it is a good practice for map elements to have an id attribute with the 
same value as its name attribute. 


A map element contains one or more area elements. Each area defines a region 
of an image that can be clicked. Areas should not overlap, but if they do, the 
document order of area elements determines the stacking order. 


Each area has four required attributes: href, alt, shape, and coords. href is the 
URL of the link that a browser jumps to when a user clicks the area. alt is read 
by screen readers to describe the link—it is not visible. shape is the shape of the 
area, which is one of three shapes: rect, circle, and poly. coords define the 
location and extent of the shape. 


The number and meaning of coordinates in coords varies with each type of 
shape. Rectangles require four comma-delimited numbers. The first two are x, y 
coordinates of the upper-left corner of the rectangle, and the second two are x, y 
coordinates of the lower-right corner. Circles require three comma-delimited 
numbers. The first two are x, y coordinates of the circle's center, and the third is 
its radius. Polygons require a series of comma-delimited numbers in pairs of x, y 
coordinates that define the points of the polygon. 


This design pattern does not use any CSS styles. 


HTML 
«img usemap-"MAP NAME" src-"FILE.EXT" 
width-"WIDTH" height-"HEIGHT" alt-"DESCRIPTION" /» 


«map name-"MAP NAME" id="MAP_NAME"> 
«area href-"URL" shape-"RECT CIRCLE POLY" coords-"x,y..." 
alt-"SCREENREADER DESCRIPTION" /» 
«/map» 


This pattern applies to images and image maps. 


Image maps work well when you want a user to explore something visual, such 
as a real-world map. The problem is that image maps are invisible. Other than 
the mouse pointer changing shape when it is over a clickable area, a user cannot 
tell where areas are located, how many areas there are, and which areas have 
already been visited. For this reason, image maps are often paired with 
redundant links that are absolutely positioned over the image. These links 

make it clear what is clickable and what has already been visited. The example 
at the end of the chapter shows how this works. 


Image, Content over Image, Content over Background Image 


www. cssdesignpatterns.com/image-map 
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Fade-out 


IMAGES 


©) Fade-out - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Fade-out 


gi Horizontal g3 Vertical Fade-out of GIF image to 
Fade-out of GIF white background color. 
image to gold 








background color. 
g4 Vertical Fade-out of JPG image to 
white background color. 

g2 Horizontal 

Fade-out of any 

a ground color to g5 Vertical Fade-out o any 

— PNG image. background color to PNG image. 
g6 Vertical Fade-out of PNG image to 

any background color. 





HTML 


<h1>Fade-out</h1> 


* 
* 





* 
* 
* 
* 


«h2 class="g1">g1 
«h2 class-"g2"5g2 


«h2 class="g3">g3 
«h2 class="g4">g4 
«h2 class="g5">g5 
«h2 class-"g6"»g6 


CSS 


.g1 ( background: 
-g2 ( background: 


-g3 ( background: 
.g4 ( background: 
-g5 ( background: 
.g6 ( background: 








Horizontal Fade-out of GIF image to gold background color.«/h2» 
Horizontal Fade-out of any background color to PNG image.«/h2» 


Vertical Fade-out of GIF image to white background color.«/h2» 
Vertical Fade-out of JPG image to white background color.«/h2» 
Vertical Fade-out of any background color to PNG image.«/h2» 
Vertical Fade-out of PNG image to any background color.«/h2» 


url("h-white2gold.gif") repeat-y left top gold; } 
url("h-trans2white.png") repeat-y right top royalblue; } 


url("v-gold2white.gif") repeat-x left top white; } 
url("v-lightning.jpg") repeat-x left top white; } 
url("v-trans2white.png") repeat-x left bottom red; } 
url("v-white2trans.png") repeat-x left top green; } 


/* Nonessential rules are not shown. */ 


Fade-out 


Problem 


Solution 


Patterns 


Location 


Limitations 


Related to 
See also 
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You want to create a gradient background behind an element. You want the 
gradient to work well regardless of how wide or tall the element grows. 


There are two keys to creating a scalable background gradient: (1) fading the 
gradient into the background color, and (2) tiling it in the opposite direction of 
the gradient. For example, when the gradient is horizontal, you can tile the image 
vertically, and vice versa. This allows the element to grow in any direction while 
preserving the gradient effect. As an element grows, the background color fills 

in where the background image ends, and the image tiles to fill in the opposite 
direction. 


Using a graphics program, you can create a gradient image, such as a JPG, GIE 
or PNG, that transitions from the forecolor and backcolor of your choosing. 
For example, if your document's background color is white and you want your 
forecolor to be gold, you could create a gradient image that transitions from 
white to gold or vice versa. 


Using a graphics program, you can use a gradient mask to fade any image, 
illustration, or graphical text into the background color. In the example, the 
fourth heading has a background image created from a texture that fades out 
to the white background color. 


You can also create a generic PNG image that fades from a predefined forecolor 
to whatever background color is currently assigned to the element. In the 
example, the second, fifth, and sixth headings use PNG images that fade from 
white to transparent. You can change the background color, and the image fades 
from white to that color. It just takes one of these chameleon PNG gradients to 
transition to any background color! 


The following design patterns show how to align and tile gradients in all four 
directions. 


Horizontal Left-to-Right Fade-out 
SELECT ( background:url("FILE.EXT") repeat-y left top COLOR; } 


Horizontal Right-to-Left Fade-out 
SELECT ( background:url("FILE.EXT") repeat-y right top COLOR; } 


Horizontal Top-to-Bottom Fade-out 
SELECT ( background:url("FILE.EXT") repeat-x left top COLOR; } 


Horizontal Bottom-to-Top Fade-out 
SELECT ( background:url("FILE.EXT") repeat-x left bottom COLOR; } 


This pattern applies to all elements. 











Internet Explorer 6 does not support PNG transparency, but Internet Explorer 7 
and the other major browsers do. In the example, the PNG images show up in 
Internet Explorer 6 as gray gradients, which is not a bad effect in and of itself. 


Semi-transparent; Background (Chapter 6) 


www. cssdesignpatterns .com/image 
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Semi-transparent 


© Semi-transparent - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Semi-transparent 





-transparent in Internet Explorer 7 and 
all other major browsers. 








HTML 


<h1>Semi-transparent</h1> 


<div id="nw"> 
<img src="nw.gif" alt="Northwest" width="437" height="328" /> 


<span id="washington" class="overlay">Washington</span> 
<span id-"oregon" class="overlay">Oregon</span> 
«span id-"idaho" class="overlay">Idaho</span> 


«p id="note1"> 
Semi-transparent backgrounds are gray in Internet Explorer 6, but they are 
semi-transparent in Internet Explorer 7 and all other major browsers.«/p» 
«/div» 





CSS 


*.overlay ( background:url("semi-transparent.png") repeat; ) 
#note1 ( background:url("trans2white.png") bottom left repeat-x; } 


/* Nonessential rules are not shown. */ 
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Semi-transparent 


Alias 


Problem 


Solution 


Pattern 


Location 


Limitations 


Advantages 


Example 


Related to 
See also 


Translucent 


You want an element to have a partially transparent background so that it stands 
out from the background below it without obscuring it. 


You can use a graphics program to create a semi-transparent PNG image. You 
can set the transparency of its background to some value less than 100% to 
make it partially transparent. You can also use a gradient mask to fade into 
transparency. The color or colors you use in this image are important. Semi- 
transparent grayscale colors are color-neutral when they overlay a background. 
Nongrayscale semi-transparent colors colorize. 


Ifthe image has the same transparency throughout, it only needs to have a 
height and width of about 10 pixels so a browser can efficiently tile it to fill the 
background of its container. For example, the semi-trnsparent.png image in the 
example is 10 pixels square, and I use background: repeat to tile it throughout the 
background. If the image contains a vertical transparent gradient, it needs to be 
about 10 pixels wide and as tall as the gradient. For example, the trans2white.png 
in the example is 10 pixels wide and 100 pixels tall to fit the gradient. I use 
background:repeat-x to tile it horizontally across the background. If the image 
contains a horizontal gradient, it needs to be about 10 pixels tall and as wide as 
the gradient, and you can tile it vertically down the background. 


CSS 
SELECT ( background:url("SEMI TRANSPARENT FILE.png") repeat; } 


This pattern applies to all elements. 


Internet Explorer 6 does not support PNG transparency, but Internet Explorer 7 
and the other major browsers do. In the example, the PNG images show up in 
Internet Explorer 6 as gray gradients, which is a nice way for the effect to 
degrade. 


Semi-transparency is practical and looks great as long as the color of the text 
contrasts well with the background. I expect to see more demand for this 
technique now that Windows Vista has joined the other major operating systems 
in building transparency effects into the desktop. 


In the example, the four spans positioned over the image have semi-transparent 
gray backgrounds. I created this effect by tiling semi-trnsparent.png across their 
background. Since this image is semi-transparent, you can partially see the 
image of the map behind them. 


In the example, paragraph #note1 has a semi-transparent gradient that starts out 
transparent at the top and transitions to white at the bottom. This allows the 
background image to show through at the top of its background and gradually 
fade out to white at the bottom. This is the same trans2white.png image that I 
used in the Fade-out design pattern. 


Fade-out; Background (Chapter 6) 


WwWw.Ccssdesignpatterns.com/semi-transparent 
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Replaced Text 


£ Replaced Text - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Replaced Text 


Heading 2 





HTML 


<h1>Replaced Text</h1> 


<h2 id="h2">Heading 2<span></span></h2> 


CSS 


#h2 { position:relative; width:250px; height: 76px; 
padding:0; overflow:hidden; } 


#h2 span { position:absolute; width:250px; height: 76px; 
left:0; top:0; margin:0; 
background:url("heading2.jpg") no-repeat; } 
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Replaced Text 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 
Related to 


See also 


You want to replace text with an image. You also want the text to be read by a 
screen reader. You also want the text to be visible if the image is unavailable. 


You can insert an empty «span» into the block element that contains text that 
you want to replace with an image. You can assign the image to be the span's 
background image. You can relatively position the block element and absolutely 
position the span at the top left of the block. This displays the span in front of the 
block. You can size both the block and the span to fit the image exactly. Since 

the block and the span are the same size and the span is in front of the block, the 
background image of the span covers the text in the block. If the span's image is 
unavailable, the text behind it is visible because the span's background is 
transparent. 


You can assign a unique ID to the block containing the text you want to replace. 
Using a unique ID is important when text you are replacing with the image is 
unique in the document. If you repeatedly replace the same text with the same 
image, you may want to use a class instead. 


Itis important that the block has no padding and the span has no margin. 
Otherwise, the hidden text might be visible. In addition, you can use 
overflow:hidden to ensure text does not overflow from behind the image. Also 
make sure the text fits within the area of the image so that if a user turns off 
images, the text does not overflow and get cut off. 


HTML 
«BLOCK id-"UNIQUE-ID"» TEXT «span»«/span»«/BLOCK» 


CSS 

#UNIQUE-ID { position:relative; padding:0; overflow:hidden; 
width:IMAGE WIDTH; 
height:IMAGE HEIGHT; ) 


#UNIQUE-ID span { position:absolute; margin:0; 
left:0; top:0; 
width:IMAGE WIDTH; 
height:IMAGE HEIGHT; 
background:url("FILE.EXT") no-repeat; } 


This pattern applies to any block element. 


When a user zooms in on a document in Firefox 2 and Internet Explorer 6, 
images do not enlarge along with the text. This does not apply to Internet 
Explorer 7 and Opera 9, which properly zoom images and text. Users typically 
zoom in because they need to see everything larger. When replaced images 
do not enlarge, the document is less accessible. This is usually not an issue 
because replaced text is typically a heading, and the text in the image is large 
to begin with. 


Text replacement works well with links and buttons that use rollover effects. 


Width, Height, Sized (Chapter 5); Background (Chapter 6); Positioning Models, 
Positioned, Closest Positioned Ancestor, Absolute (Chapter 7); Left Aligned, Top 
Aligned (Chapter 9) 


www. cssdesignpatterns.com/replaced-text 
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Content over Image 


© Content over Image - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Content over Image 


Crater Lake North Rim 


* August 4, 2003 * 





HTML 


«hi»Content over Image</h1> 


«div class="figure"> 
«h3 class-"caption"»Crater Lake North Rim«/h3» 
«p id="crater-date"><img src-"star.gif" alt-"" /» August 4, 2003 
«img src-"star.gif" alt-"" /»«/p» 
«img class-"framed" width-"518" height-"389" 
src-"crater-lake.jpg" alt-"Crater Lake North Rim August 4, 2003" /></div> 


CSS 


*.figure ( float:left; position:relative; 
color:white; background-color:black; } 





*.figure *.caption { position:absolute; margin:15px; left:0; top:0; 
font-size:1.05em; ) 


*.framed ( display:block; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:1px solid gray; border-bottom:2px solid black; } 


#crater-date ( position:absolute; left:0; bottom:10px; width:518px; 
text-align:center; color:white; font-size:0.8em; } 
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Content over Image 


Problem 


Solution 


Pattern 


Location 


Tips 


Example 


Related to 


See also 


You want to place text on top of an image. You want to position the text relative 
to the image. You want the text to be visible if the image does not load. You want 
search engines to give the text a high priority and to index the image because it is 
part of the content. 


You can embed a heading, an image, and any other type of object in a block 
element. You can shrinkwrap the block around the image by floating it or 
absolutely positioning it. This makes this design pattern work with any size 

of image. You can relatively position the block so it is the closest positioned 
ancestor of the image. This allows you to position text elements at any location 
over the image. 


You can absolutely position the heading and use the alignment design patterns 
in Chapter 9 to position it within the image. Aligning the heading to the block is 
the same as aligning to the image because the block is shrinkwrapped to the 
image and is the closest positioned ancestor. 


HTML 
«BLOCK class-"figure"» 
«HEADING class-"caption"» TEXT OVER TEXT </HEADING> 


«p id-"UNIQUE ID"» TEXT OVER TEXT «/p» 


«img src-"FILE.EXT" alt-"IMAGE DESCRIPTION" 
width-"IMAGE WIDTH" height-" IMAGE HEIGHT" /> 
«/ BLOCK» 


CSS 

*.figure ( float:LEFT OR RIGHT; position:relative; 
color:COLOR; background-color:COLOR; j 

*.figure *.caption ( position:absolute; POSITIONING STYLES; } 

*.framed ( display:block; border:WIDTH STYLE COLOR; } 


#UNIQUE_ID { position:absolute; POSITIONING STYLES; } 
This pattern can be used anywhere a block element can be used. 


You can use any type of element for text-over effects. I use a heading because 
search engines prioritize headings, and speech readers use headings to create 
an aural table of contents for the page. 


You can include any number and type of child elements in the figure. You can 
assign each to a unique ID so that you can position it within the image. 


In case a down-level browser does not shrinkwrap the block around the image, 
you should put borders around the image instead of the block. 


The example assigns text in the block to a white color over a black background. 
This ensures the text is visible if the image does not load. Also, the alt text is 
purposefully omitted from the two star images because they are meant to be 
decorative—the Inline Decoration design pattern is a better choice for displaying 
decorative images, but I wanted to keep the example simple. 





Content over Background Image; Display, Block Box (Chapter 4); Border, 
Background (Chapter 6); Positioning Models, Positioned, Closest Positioned 
Ancestor, Absolute, Float and Clear, Relative Float (Chapter 7); Aligned and 
Offset Absolute (Chapter 8); Inline Decoration (Chapter 11) 


www. cssdesignpatterns .com/content-over- image 
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Content over Background Image 


© Content over Background Image - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Content over Background Image 


Crater Lake North Rim 


* August 4, 2003 * 





HTML 


«hi»Content over Background Image</h1> 


«div id="crater-lake"> 
«h3 class-"caption"»Crater Lake North Rim</h3> 
«p id="crater-date"><img src-"star.gif" alt-"" /» August 4, 2003 
«img src-"star.gif" alt-"" /»«/p»«/div» 


CSS 


#crater-lake ( position:relative; padding:0; width:700px; height:500px; 
background:black url("crater-lake.jpg") no-repeat center center; } 





#crater-lake *.caption ( position:absolute; margin:15px; left:0; top:0; 
font-size:1.05em; color:white; ) 


#crater-date ( position:absolute; left:0; bottom:10px; width:700px; 
text-align:center; color:white; font-size:0.8em; } 


/* Nonessential rules are not shown. */ 
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Content over Background Image 


Problem 


Solution 


Pattern 


Location 


Advantages 


Tip 
Example 


Related to 


See also 


Like the Content over Image design pattern, you want to place text and objects 
on top of an image, but you do not want the image to be part of the document's 
content, and you do not want search engines to index the image. You want to 
position the text relative to the image. You want the text to be visible when the 
image does not load. You want search engines to give the text priority. 


You can assign a background image to a sized block element. Unique IDs work 
well for linking unique background images to these blocks. If you use the same 
image multiple times, you may want to use a class instead. 


You can use background to center a nontiled background image in the block. You 
can size the block to the exact size of the image or to an arbitrary size. If you size 
itlarger than the image, the background color of the block becomes visible and 

creates a picture-frame effect around the image. The same thing happens if you 
apply padding to the block. If you size the block smaller than the image, it crops 
the image. 


You can relatively position the block so you can absolutely position its child 
elements relative to it. You can use the alignment design patterns in Chapter 9 
to position child elements within the image. 


HTML 

«BLOCK id-"IMAGE-NAME"» 
«HEADING class-"caption"» TEXT OVER TEXT «/HEADING» 
«p id-"UNIQUE ID"» TEXT OVER TEXT «/p» 

</BLOCK> 


CSS 
#IMAGE-NAME { 
position: relative; 
width: IMAGE-WIDTH; height: IMAGE-HEIGHT; 
padding: VALUE; 
background: url("FILE.EXT") COLOR center center no-repeat; } 


#IMAGE-NAME *.caption { position:absolute; POSITIONING STYLES; } 
#UNIQUE_ID { position:absolute; POSITIONING STYLES; } 


This pattern can be used anywhere a block element can be used. 


There is less HTML markup than the Content over Image pattern because there 
is no image element. There is no need for alt text because a text-over caption 
serves the same purpose. This works better when the image fails to download 
because a browser does not try to display alt text in its place, which might get in 
the way of the content rendered on top of the image. 


GIF and PNG images with transparent backgrounds overlay background images 
nicely. PNGs can even blend their edges into the background. 


In the example, I increase the height and width of the block to create a picture 
frame around the image. 


Content over Image; Width, Height (Chapter 5); Padding, Background 
(Chapter 6); Positioning Models, Positioned, Closest Positioned Ancestor, 
Absolute (Chapter 7); Aligned and Offset Absolute (Chapter 8); Inline 
Decoration (Chapter 11) 


www. cssdesignpatterns .com/content-over-background- image 
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CSS Sprite 


©) CSS Sprite - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


CSS Sprite 


~ 


Washington 


; 
1? Oregon 





HTML 
<h1>CSS Sprite</h1> 


<div id="nw"> 
<img src="nw.gif" width="290" height="200" alt="Northwest USA" /> 


«a id-"olympia" class="bang-bg" href-"olympia.html" title-"Olympia"» 
«span class="screenreader-only">Olympia</span></a> 


«a id-"salem" class-"flag-bg" href-"salem.html" title-"Salem"» 
«span class="screenreader-only">Salem</span></a> 


«a id-"boise" class-"star-bg" href-"boise.html" title-"Boise"» 
«span class="screenreader-only">Boise</span></a> 
«/div» 


CSS 


*.bang-bg ( background:url("bt.gif") -48px -16px; width:16px; height:16px; } 
*.flag-bg ( background:url("bt.gif") -64px -16px; width:16px; height:16px; } 
*.star-bg ( background:url("bt.gif") -64px -32px; width:16px; height:16px; } 


*.star-bg:hover ( background-image:url("wt.gif"); background-color:black; } 
*.flag-bg:hover ( background-image:url("wt.gif"); background-color:black; } 
*.bang-bg:hover ( background-image:url("wt.gif"); background-color:black; ] 


*.screenreader-only ( position:absolute; left:-9999px; top:-9999px; 
width:1px; height:1px; overflow:hidden; } 


/* Nonessential rules are not shown. */ 
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CSS Sprite 


Problem 


Solution 


Pattern 


Location 


Limitations 


You want to use many images on a page, but you do not want the performance 
penalty caused by downloading multiple image files. Even on a broadband 
connection, it is not unusual for latency alone to slow the rendering of a page 
by 100 milliseconds per image. In other words, the latency of downloading 

ten images will likely delay the rendering of a page by 1 second—no matter how 
small the image files. Of course, delays caused by latency vary depending on 
web server proximity and how busy it is. 


You can combine multiple background images into one image file. This file is 
called a CSS sprite. For example, you could include most, if not all, of a page's 
background images in one file. You could also embed a library of list bullets, 

icons, and text decorations in a CSS sprite that is shared across your web site. 


The key to using a sprite is to display it as the background image of a sized 
element and to position the background image at the exact horizontal and 
vertical offset of the embedded image. The element must be the exact width and 
height of the desired embedded image; otherwise, parts of several embedded 
images may be visible in its background. The element must be set to the proper 
horizontal and vertical offset, or the background will show the wrong embedded 
image or will show parts of several embedded images. The measurements used 
in width, height, and background-position must all be in pixels because 
embedded images are measured in pixels. The values in background-position 
are negative because they move the composite background image up and to the 
left to position it. 


You can replace «img» elements with CSS sprites by displaying them as 
background images within sized spans or divisions, but unless content images 
cause performance problems, it is more natural to use «img» elements. When 
replacing an image with a CSS sprite, you can use the Screenreader-only design 
pattern to embed hidden alternate text that will be read only by screen readers. 
This makes the CSS sprite accessible. 


HTML 
«ELEMENT» 

«span class-"screenreader-only"» ALTERNATE TEXT «/span» 
«/ ELEMENT» 


CSS 

SELECTOR ( width:SPRITE WIDTH; height:SPRITE HEIGHT; 
background-image:url("SPRITE FILE.EXT"); 
background-position:-HORIZONTAL OFFSETpx -VERTICAL OFFSETpx; j 


SELECTOR:hover ( background-image:url("HOVER SPRITE FILE.EXT"); 
background-color:COLOR; } 
This pattern applies to any type of element. 


Background images using CSS sprites cannot be tiled because the entire 
composite image would be tiled rather than just the embedded image. 


(Continued) 
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CSS Sprite (Continued) 


0 -16 -32 -48 -64 -80 -96 -112 
0 v«xoc«uauazs 
-6 —- 1 t F ËT 
32| Ww f mg x mu 
48 | v» c 2$ 55 D 0 B a 
-64 | [5 [E] £* i ^ I DI 
30 ^22x4rc€ 
Fy 
4 





-96 | + € «m» È 
-112 |a *" hk «ao 
-1428| 2 *$» » 4 ¢ 
-144 | 2 D oo & 
-160 | Ed lid E] © 
-176 | P E ga d gu 

é 


r & 


R 
e 


be Im * a n 
-- 


-192 | B às vs i 

208| F4 € € 5 
-224 | Mi b n m im x 1H 
-240 | Ast FTP TEP df} 10! d£ E 


D 
eo 


Figure 14-1. Offsets for 16X16 sprites as used in bt.gif 


Example 

I use two CSS sprite files in the example: bt.gif (see Figure 14-1) and wt.gif. These file names 
stand for a black image on a transparent background and a white image on a transparent 
background. When the user mouses over the image, the hover selector switches out the bt. gif 
and replaces it with wt.gif, which inverts the color from black to white. The background is 
also changed to black, which shows through the transparent parts of the image. 

I include two other sprite files in the example directory that are not used in the example. 
They are named tb.gif and tw.gif. These file names stand for transparent images in black 
boxes and transparent images in white boxes. These embedded images are little black and 
white boxes with transparent images in the center, which change color to match the back- 
ground. 

I created these four CSS sprites from an icon set called bitcons. I made all the embedded 
images exactly 16X16 pixels, like the originals. These icons are freely licensed and are available 
at http: //somerandomdude.net/srd-projects/bitcons. Likewise, you are free to use these four 
CSS sprite files in your projects. 

When making your own CSS sprite images, you can embed any image of any size into the 
sprite. Embedded images do not need to be the same size. All you need to know is the offset 
and size of each embedded image. 
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CSS Sprite (Continued) 


Advantages 


Disadvantages 


Tip 


Latency 


Sprite history 


Related to 
See also 


By reducing the number of files that are downloaded, you can dramatically 
speed the loading of a page. Embedding multiple images in a single file 
typically results in a smaller overall file size than the combined file sizes 

of separate images. 


Combining images to create sprites and tracking their offsets can be time 
consuming and error prone. This makes managing images harder. It works 
best when you create a sprite containing a library of images that work 
together to skin a document. Whenever you want to change the look and 
feel of a document, you change the sprite. 


Managing sprite offsets is easier if all embedded images are the same size. 


Over a broadband connection to the Internet, downloading data in a small 
file is very quick, but the communication latency involved in requesting a 
small file can often take several times longer than actually downloading 
the file! HTTP and TCP/IP communications protocols require handshake 
messages to be sent back and forth before content can be downloaded, 
messages traveling across the Internet compete for bandwidth, and servers 
queue requests until they can get to them. My measurements show latency 
delays the rendering of a page by approximately 100 milliseconds plus the 
time it takes to download the data. 


Using Google Load Time Analyzer for Firefox, I tracked web page download 
times on my high-speed broadband connection. For example, the home page 
of MSN.com took 5 seconds to download 41 files: 1 HTML document, 3 CSS 
stylesheets, 4 JavaScript files, 15 GIFs, 10 JPGs, and 8 ad callbacks. The total 
download size was 136K, which took 1742 ms to download. The time it took to 
send messages to the server and to wait for replies was 15,960 ms! In other 
words, for each millisecond that data was downloaded, 9 milliseconds were 
spent waiting: 3 milliseconds were lost waiting for messages to travel back 
and forth across the Internet, and 6 milliseconds were lost due to server 
latency. I have documented the results in an Excel spreadsheet included in 
this design pattern's example directory. 


If all 25 images in the MSN homepage were merged into one composite file, 
latency would be reduced from 9000 ms to 500 ms. This would save 8500 ms! 
Since a browser downloads using three connections simultaneously, the 
actual savings are one-third of 8500 ms, or 2800 ms. This one change alone 
would reduce the download time of the MSN homepage from 5.2 seconds to 
2.4 seconds—more than doubling its download speed! 


A sprite gets its name from a technique used in two-dimensional video games 
of compositing multiple images into one file where each image is a frame of 
animation. You can animate a sprite simply by rotating the display through 
offsets in the composite image. Animated GIFs use this technique, and you 
can use this technique to create rollover effects. 


Image; Width, Height (Chapter 5); Background (Chapter 6) 


www.cssdesignpatterns.com/css-sprite 
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Basic Shadowed Image 


©) Basic Shadowed Image - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 





Basic Shadowed Image 





HTML 


«hi»Basic Shadowed Image</h1> 


<img class="shadowed" 
src="crater-lake. jpg" 
alt="Crater Lake" 
width="518" 
height="389" /> 


CSS 


img.shadowed { padding-right: 20px; 
padding-bottom: 20px; 
background- image: url("shadow. jpg"); 
background-position:right bottom; 
background-repeat:no-repeat; } 
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Basic Shadowed Image 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Related to 
See also 


You want to place a shadow behind an image without having to modify the 
original image. You also want to control the distance the shadow is offset from 
behind the image. 


You can create a shadow image that is the same size as the image it is 
shadowing. You can assign the shadow as the nontiled background of the 
image. You can use background-position to move the background shadow to 
the bottom right of the padding area. You can use padding-right :+VALUE and 
padding-bottom:+VALUE to control how much the shadow extends below the 
bottom right of the image. 


Shadows are traditionally displayed in the bottom-right corner, but if you 
want to display them in a different corner, you can extend the padding into 
that corner and position the shadow there. 


HTML 

«img class="shadowed" 
src="FILE.EXT" alt="DESCRIPTION" 
width="WIDTH" height="HEIGHT" /» 


CSS 

*.shadowed { padding-right:+VALUE; 
padding-bottom:+VALUE; 
background-image:url("FILE.EXT"); 
background-position:right bottom; 
background-repeat:no-repeat; } 


This pattern applies to images. 


Because the shadow is an image, there is no limit to what you can do with 
the shadow. You can use any color, blur, and texture to fit the style of your 
document. 


This pattern is simple and does not require you to process images to embed 
shadows in them. You can also change the look and feel of all shadows on a 
web site by simply changing the shadow image. 


This pattern requires you to create a shadow image for each size of image. 

If all your images are the same size or have a limited number of sizes, this 
pattern works well. If your images come in unpredictable sizes, you may want 
to use the more complicated, yet more versatile, Shadowed Image pattern. 


The latency caused by a browser checking to see whether the shadowed image 
has already been downloaded slows the rendering of a page—even on 
broadband connections. 


Image, Shadowed Image; Padding, Background (Chapter 6) 


www.cssdesignpatterns .com/basic-shadowed- image 
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Shadowed Image 





Figure 14-2. shadow.jpg 





| 


Figure 14-3. shadow-rt.jpg and shadow-lb.jpg are created by extracting them from shadow.jpg. 





Figure 14-5. shadow-Ib.jpg indents and closes off the left-bottom edge of the shadow. 





CHAPTER 14 ™ IMAGES 


Shadowed Image 


Problem 


Solution 


You want to place a shadow behind an image without having to modify the 
original image. You also want to control how much the shadow is offset from the 
image. You also want the shadow to work automatically with any size of image. 


You can use three image files to create a shadow that will automatically fit any 
image. This can be a great timesaver because you do not need to embed shadows 
within images, and it makes it easy to change the style of the shadows on the fly. 


Like the Basic Shadowed Image pattern, the first step is to create a shadowed 
image, as shown in Figure 14-2, or reuse one previously created like the one in 
the example. I name this file shadow. jpg. Unlike the Basic Shadowed Image 
pattern, shadow. jpg should be as large as the largest image it will shadow. 


In addition, you need to create two additional images by extracting them from 
the shadowed image (see Figure 14-3). One indents and closes off the right-top 
edge of the shadow (see Figure 14-4), and one indents and closes off the left- 
bottom edge of the shadow (see Figure 14-5). These images are the key to 
creating an automatically sized shadow because they create the illusion that the 
shadow is indented on the right-top and the left-bottom, as shown in Figure 14-6. 
Icall these the indentor images. 


In the example, I created the two indentor images as follows. I extracted the 
right-top corner of the shadow image and saved it as shadow-rt. jpg (see 

Figure 14-4). I also extracted the left-bottom corner of the shadow image and 
saved it as shadow-1b. jpg (see Figure 14-5). I made shadow-rt. jpg 100 pixels wide 
and only as tall as needed to capture the shadow's blur. I made shadow-1b. jpg 
100 pixels tall and only as wide as needed to capture the shadow’s blur. I then 
expanded the canvas of each of these two images to make them 100 pixels 
square. I put the background color in the expanded part of these images. This 
allows the indentors to indent up to 100 pixels of the shadow by covering it with 
the background color (see Figure 14-6). 


You need to stack the images in the following order from bottom to top: 

shadow. jpg, shadow-rt.jpg, and shadow- 1b. jpg. The image receiving the shadow 
gets stacked on top of them all, as shown in Figure 14-6. You can stack these 
three background images by assigning them to three nested block elements. I 
typically use divisions. The order is important. You can assign shadow. jpg to the 
outermost block element. You can assign shadow-rt. jpg to the second nested 
element. You can assign shadow-1b. jpg to the third nested element. You can 
place the «img» element inside the third nested block. 


To shrinkwrap these three elements to the size of the image, you need to float 
them or absolutely position them. 


(Continued) 
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Shadowed Image (Continued) 





Figure 14-6. Composite view of the shadowed image 
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Shadowed Image (Continued) 


Apply styles to your chosen class or ID as follows: 


-You can use background-image to load the shadow images into the backgrounds 
of their respective elements. 


-You can use background-position:right bottom; to position the shadow image 
in the right-bottom corner of the image. 


-You can use background-position:right TOP OFFSET; to position shadow-rt. jpg 
at an offset from the right-top corner of the image. You can calculate the value 

of TOP. OFFSET by adding BOTTOM OFFSET to the negative of the height of 

shadow-rt. jpg. For example, if the height of shadow-rt. jpg is 100 pixels and 
BOTTOM OFFSET is 20 pixels, you would add 20 to —100 to get a TOP OFFSET of 
-80px. By offsetting shadow-rt. jpg by the inverse of its height, you are aligning 
its bottom to the top of the background. By adding back in the BOTTOM OFFSET, 
you move it down the same amount that you move down the shadow. 


-You can use background-position:LEFT OFFSET bottom; to position shadow-lb. 
jpg at an offset from the left-bottom corner of the image. You can calculate the 
value of LEFT OFFSET by adding RIGHT OFFSET to the negative of the width of 
shadow-1b.jpg. For example, if the width of shadow-1b. jpg is 100 pixels and 
RIGHT OFFSET is 20 pixels, you would add 20 to -100 to get a LEFT OFFSET of -80px. 
By offsetting shadow-1b. jpg by the inverse of its width, you are aligning its right 
side to the left side of the background. By adding back in the LEFT OFFSET, you 
move it to the right by the same amount that you move the shadow to the right. 


-You can use background-repeat:no-repeat to prevent each background image 
from being tiled. 


-You can use padding-right:RIGHT OFFSET to move the shadow image past the 
right side of the image. 


-You can use padding-bottom:BOTTOM OFFSET to move the shadow image below 
the bottom of the image. 


(Continued) 
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Shadowed Image (Continued) 


?) Shadowed Image - Mozilla Firefox Eek) 
File Edit View History Bookmarks Tools Help 


Shadowed Image 





HTML 


<h1>Shadowed Image</h1> 


<div class="shrinkwrapped"> 
<div class="shadowed"> 
<div class="shadowed-rt"> 
<div class-"shadowed-lb"» 
<img src="crater-lake.jpg" alt="Crater Lake" width="518" height="389" /> 
</div></div></div></div> 


css 
*.shrinkwrapped { float:left; } 


* 


.shadowed ( background-image:url("shadow.jpg"); 
background-position:right bottom; background-repeat:no-repeat; ] 


* 


.shadowed-rt ( background-image:url("shadow-rt. jpg"); 
background-position:right -80px; background-repeat:no-repeat; ] 


* 


.shadowed-lb { padding-right:20px; padding-bottom:20px; 
background-image:url("shadow-lb.jpg"); 
background-position:-80px bottom; background-repeat:no-repeat; ] 
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Shadowed Image (Continued) 


Pattern HTML 
«div class-"shrinkwrapped"» 
«div class="shadowed"> 
«div class="shadowed-rt"> 
«div class="shadowed-1b"> 
«img src-"FILE.EXT" alt-"" width-" WIDTH" height-"HEIGHT" /» 
«/div»«/div»«/div»«/div» 


CSS 
*.shrinkwrapped ( float:LEFT OR RIGHT; j 


*.shadowed ( background-image:url("FILE.EXT"); 
background-position:right bottom; 
background-repeat:no-repeat; ] 


*.shadowed-rt { background-image:url("FILE-rt.EXT"); 
background-position:right TOP OFFSET; 
background-repeat:no-repeat; } 


* .shadowed-1b { 
padding-right:RIGHT OFFSET; 
padding-bottom:BOTTOM OFFSET; 
background-image:url("FILE-lb.EXT"); 
background-position:LEFT OFFSET bottom; 
background-repeat:no-repeat; ] 


Location This pattern applies to images. Because this pattern wraps the image in block 
elements, it cannot be used inline. 


Advantages Because the shadow is an image, there is no limit to what you can do with the 
shadow. You can use any color, amount of blur, and texture to fit the style of 
your document. Because this pattern automatically fits the shadow to the size 
of the image, you only need to create three images to put a shadow behind 
any image of any size. The browser only has to download three image files to 
create an unlimited number of shadows. 


Disadvantages This pattern requires you to insert extra divisions into the markup to create 
this shadow effect. 


This pattern requires you to shrinkwrap the parent division to the image. 
Otherwise, it will be stretched to the width of its container, and the nested 
background images will extend beyond the image to fill the width of the 
container. This breaks the shadow effect. In the pattern, I floated the element 
to shrinkwrap it. You could also position it to shrinkwrap it. The only block 
element that shrinkwraps naturally is the table. 


Related to Image, Basic Shadowed Image, Rounded-corners; Padding, Background 
(Chapter 6); Float and Clear (Chapter 7) 





See also www. cssdesignpatterns .com/shadowed- image 
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Rounded Corners 


£) Rounded Corners - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Rounded Corners 


You can nest two divisions to create two opposite rounded corners. 


You can nest two divisions to create two opposite rounded corners. 
You can nest four divisions to create four rounded corners. 


HTML 





<div class="bg"><div class-"tl"»«div class="br pad"> 
You can nest two divisions to create two opposite rounded corners. 
</div></div></div> 


<div class="bg"><div class="tr"><div class-"bl pad"> 
You can nest two divisions to create two opposite rounded corners. 
</div></div></div> 


<div class="bg"> 
«div class="tl"><div class="br"><div class-"trc"»«div class-"blc pad"> 
You can nest four divisions to create four rounded corners. 
</div></div></div></div></div> 


css 
*.bg ( background:url("bg.gif") bottom left repeat-x white; margin-top:20px; } 
«tl ( background:url("rc.gif" 
.br ( background:url("rc.gif' 
.tr ( background:url("rc.gif' 
«bl ( background:url("rc.gif' 


top left no-repeat; ] 
bottom right no-repeat; ] 
top right no-repeat; } 
bottom left no-repeat; } 





+ + * * 


) 
) 
P. 
) 


* 


.trc ( background:url("rc-trc.gif") top right no-repeat; } 
eblc ( background:url("rc-blc.gif") bottom left no-repeat; } 


* 


*.pad ( padding:10px; } 
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Rounded Corners 


Problem 


Solution 


Patterns 


Location 


You want to round the corners of an element's box. You want the corners to 
expand and shrink with the box so it will work with any amount of content. 


You can create rounded corners by embedding background images of rounded 
corners inside an element. These images also include the borders that connect 
the rounded corners to each other. Because these are images, you can create any 
style of corner and border you can imagine. 


Since CSS only allows one background image per element, you can insert extra 
divisions inside the element you want to have rounded corners—one division 
for each rounded corner. Embedded divisions with no margins and padding are 
located in exactly the same position as their parent. This allows you to layer 
background images on top of each other. Note that when a parent element has 
a fixed height, its child divisions must also have the same fixed height. 


The first two boxes in the example have two rounded corners and two nested 
divisions. The third box has four rounded corners and four nested divisions. 
A detailed explanation follows on the next page. 


HTML 

«div class-"bg"»«div class-"tl"»«div class="br"> 
CONTENT 

</div></div></div> 

or 


«div class="bg"><div class="tr"><div class="b1"> 
CONTENT 
</div></div></div> 


or 


«div class="bg"><div class-"tl"»«div class="br"> 
<div class="tre"><div class="blc"> 
CONTENT 
</div></div></div></div></div> 


CSS 
*.bg ( background:BACKGROUND STYLES; margin-top:20px; } 


.tl ( background:url("RC FILE.EXT") top left no-repeat; } 
.tr ( background:url("RC FILE.EXT") top right no-repeat; } 
.br ( background:url("RC FILE.EXT") bottom right no-repeat; } 
.bl ( background:url("RC FILE.EXT") bottom left no-repeat; } 


* * * X 


* 


.trc ( background:url("TRC FILE.EXT") top right no-repeat; j 
.blc ( background:url("BLC FILE.EXT") bottom left no-repeat; } 


This pattern applies to block elements and inline elements that are positioned, 
floated, or displayed as blocks. 


* 


(Continued) 
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Rounded Corners (Continued) 





Figure 14-7. Creating rounded corners from rounded rectangle images 


Creating the Three Rounded Rectangle Images 

In the example, I started with a 1600X1600 transparent canvas. I added a rounded rectangle 
that hugged the edges of the canvas. The rounded rectangle had a transparent interior. I filled 
in the exterior pixels of each rounded corner with the external background color, which is 
white in my example. This makes them opaque so the outside of each corner overlays the 
interior background with the background color. Notice in Figure 14-7 how the outside of the 
top-left corner of the first rounded rectangle and the outside of the bottom-right corner of 
the second rounded rectangle would display the internal background if they were not opaque. 
Lastly, I saved the image as rc.gif. 

To create the cutout images, I cut out the bottom-left corner and the top-right corner of 
the rounded rectangle image and saved them as separate GIF images named tr.gif and 
bl.gif. Imade sure the exterior part of the corner remained opaque and the interior remained 
transparent. Otherwise, they would not do their job of hiding the external square borders on 
the outside and letting the background show through on the inside. I sized each cutout just 
large enough to cover the square corner with a rounded corner. 

Creating the three rounded rectangle images is simple: create a transparent rounded 
rectangle; fill in the exterior of its rounded corners; and save the bottom-left and top-right 
corners as separate images. 
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Rounded Corners (Continued) 


Detailed Solution 


Limitations 


Related to 


See also 


You can assign a background image to each nested division. I use six 
classes for that purpose: t1, br, tr, trc, bl, and blc, which stand for top 
left, bottom right, top right, top-right corner, bottom left, and bottom-left 
corner. 


To create two opposite rounded corners, you can apply the same 
background image to two child divisions. The image should be a large 
rounded rectangle with a transparent interior so the background image 
or color will show through. The exterior of its rounded corners should be 
opaque and should be the same color as the exterior background color. 


The key is to position the same rounded rectangle image in the top-left 
corner and in the bottom-right corner (see Figure 14-7). This creates two 
overlapping rounded rectangles. As the element expands or contracts, so 
do the rounded rectangles. The content of the element can grow as large as 
the size of the rounded rectangle before the illusion breaks. This is not a 
problem because you can make this rectangle as large as you want. In the 
example, I made the rounded rectangle image 1600X1600 pixels, and yet it 
has a file size of only 8,278 bytes because most of it is transparent. 


To create four rounded corners, you can position the same rounded 
rectangle image in the top-left corner and in the bottom-right corner. You 
then assign two additional background images to two additional nested 
divisions: one is positioned in the top-right corner, and the other in the 
bottom-left. These new images are tiny rounded corners that cover up the 
square intersections of the two overlapping rounded rectangles, as shown 
in Figure 14-7. It is important that these two corner divisions are placed 
after the first two rounded rectangle divisions. This allows the corner 
divisions to be stacked on top of the others. 


You can set the interior background by assigning a background color or 
image to the parent of the rounded corner box. In the example and the 
pattern, I use the bg class to assign this background. Likewise, the best 
place to set the margin is the parent. The best place to set the padding is the 
last embedded division. In the example, I assign the pad class to the last 
embedded division to set the padding for the interior of the rounded 
corner box. You should not apply a border to any of these elements 
because it would conflict with the rounded corners. 


The exterior of the cutout corner images must not be transparent. When 
they are transparent, they show the intersection of the rounded rectangle 
borders. This breaks the illusion. Since the exterior of the cutout corner 
images must be opaque, the opaque exterior needs to match the 
background color that surrounds the outside of the rounded rectangle. 
This requires that you create a different set of cutout corner images for 
each different external background color you intend to use. 


There is a bug in Internet Explorer 6 that sometimes causes the 
background to leak out from behind the element. You can assign zoom:1 
to the parent element to give it "layout," which prevents the background 
from leaking out. See the Atomic pattern in Chapter 7 for more details on 
"layout." 


Image, Basic Shadowed Image, Shadowed Image; Margin, Background 
(Chapter 6) 


www. cssdesignpatterns .com/rounded-corners 
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Image Example 


© Northwest USA - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Northwest USA 


Washington 


Montana 


Click on a state to load information 
about that state. 

Click on a symbol to load 
information about that location. 





Representative Excerpts from the HTML 


<h1>Northwest USA</h1> 


<div id="states"> 
<img src="nw.gif" width="437" height="328" 
alt="Northwest" usemap="#nw-map" class-"shadowed" /» 


«a id-"washington" href-"washington.html" class-"overlay"»Washington«/a» 
«a id-"oregon" href-"oregon.html" class="overlay">Oregon</a> 
«a id-"idaho" href="idaho.html" class="overlay">Idaho</a> 


«a id-"olympia" class-"bang-bg" href-"olympia.html" title-"Olympia"» 
«span class="screenreader-only">Olympia</span></a> 

«a id-"salem" class-"flag-bg" href-"salem.html" title-"Salem"» 
«span class-"screenreader-only"»Salem«/span»«/a» 





«div id-"info" class-"bg"» 

«div class-"tl"»«div class="br"><div class-"trc"»«div class-"blc pad"> 
«p»Click on a state to load information about that state.«/p» 
«p»Click on a symbol to load information about that location.«/p» 
</div></div></div></div></div> 

</div> 


CHAPTER 14 ™ IMAGES 


Image Example 


Example This is not a design pattern but an example that illustrates how the design 
patterns in the chapter can work together. 


Explanation The main image in the example is a map of the Pacific Northwest. I used the 
Basic Shadowed Image design pattern to put a shadow behind it. The image is 
linked to the nw-map element to make areas on the map clickable. I used the 
Content over Image design pattern to put links on top of the map. When the user 
hovers over these links, the background displays a semi-transparent PNG image, 
which partially hides the content under the image. I also use the CSS Sprite 
design pattern to put clickable rollover images on top of the map. I also use the 
Rounded Corners and Fade-out design patterns to style the message below 
the map. 


See also www. cssdesignpatterns .com/image-example 


Representative Excerpts from the CSS 


* shadowed ( padding-right:12px; padding-bottom: 12px; 
background:url("shadow. jpg") right bottom no-repeat; } 


*.screenreader-only { position:absolute; left:-9999px; top:-9999px; 
width:1px; height:1px; overflow:hidden; } 


a { text-decoration:none; color:black; } 

a:hover { border-left:1px solid silver; border-right:1px solid gray; color:white; 
border-top:1px solid silver; border-bottom:1px solid gray; 
background-image:url("semi-transparent.png"); background-repeat:repeat-x; } 

*.overlay ( padding:2px 4px; ] 


*.bg ( background:url("white2trans.png") top left repeat-x yellow; 
margin-top:20px; ] 

.tl ( background:url("rc.gif") top left no-repeat; } 

.br ( background:url("rc.gif") bottom right no-repeat; } 

.trc ( background:url("rc-trc.gif") top right no-repeat; ] 

.blc ( background:url("rc-blc.gif") bottom left no-repeat; ] 

.pad ( padding:10px; j 


* * o X X X 


* 


.bang-bg ( background:url("b 
*.flag-bg ( background:url("b 
*.star-bg ( background:url("b 


t.gif") -48px -16px; width:16px; height:16px; ] 
t.gif") -64px -16px; width:16px; height:16px; ] 
t.gif") -64px -32px; width:16px; height:16px; ] 
*.bang-bg:hover ( background-image:url("wt.gif"); background-color:black; } 
*.star-bg:hover ( background-image:url("wt.gif"); background-color:black; } 
*.flag-bg:hover ( background-image:url("wt.gif"); background-color:black; } 


#states ( position:relative; float:left; } 
#washington ( position:absolute; top:35px; left:80px; } 
#oregon ( position:absolute; top:135px; left:85px; j 
#idaho ( position:absolute; top:150px; left:210px; j 





CHAPTER 15 


Tables 


dus are one of the most useful and complex structures in HTML. This is the first of two 
chapters on tables. This chapter explores the HTML structure of tables and how you can style 
them. The next chapter explores the many ways you can automatically lay out columns in 
tables. The purpose of tables is to identify and style tabular data. 


Chapter Outline 


Table shows how to create and style the fundamental structure of a table. 


Row and Column Groups shows how to create and style row headers, row footers, row 
groups, column groups, and columns. 


Table Selectors shows how to select cells from columns, rows, and row groups. 
Separated Borders shows how to separate table borders from cell borders. 
Collapsed Borders shows how to combine table and cell borders. 

Styled Collapsed Borders shows how to style collapsed borders. 

Hidden and Removed Cells shows how to hide or remove cells. 


Removed and Hidden Rows and Columns shows how to remove or hide rows, row 
groups, and columns of cells. 


Vertical-aligned Data shows how to vertically align data to the top, middle, bottom, or 
baseline of a cell. 


Striped Tables shows how to assign alternating backgrounds to rows. 
Accessible Tables shows how to create a table that is friendly to nonsighted users. 
Tabled, Rowed, and Celled shows how to turn any element into a table, row, or cell. 


Table Layout shows how to create the four types of tables: shrinkwrapped, sized, 
stretched, and fixed. 
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Table 


© Table - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Table 


Simple Table 


[3|2|s|4|s|s5 
| 71s { 9 | so} 11| 12. 
Table with Spanned Rows and Cells 


ae 
al 
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HTML 


<h1>Table</h1> 


<h2>Simple Table</h2> 
<table> 
<tr> <th>1</th> <th>2</th> <th>3</th> <th>4 </th> <th>5 </th> <th>6 </th> </tr> 
<tr> <th>7</th> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> 
</table> 


<h2>Table with Spanned Rows and Cells</h2> 
<table> 
<tr> <td rowspan="2">1</td> <td colspan="2">2-3</td> </tr> 
<tr> <td>8</td> <td>9</td> <td> </td> <td>&nbsp;</td> <td>12</td> </tr> 
</table> 


CSS 


table ( width:auto; height:1px; table-layout:auto; border-collapse:collapse; 
margin-left:20px; border:1px solid black; } 


td, th ( width:50px; height:1px; overflow:hidden; visibility:visible; 
border:ipx solid black; padding:5px; background:gold; 
text-align:center; vertical-align:middle; text-indent:5px; ] 


Table 


Problem 


Solution 


Pattern 


Location 
Related to 


See also 
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You want to create a table to present data in rows and columns. 


At its simplest, a table consists of a «table» element containing one or more row 
«tr» elements, which contain one or more cells. Cells can be header cells, «th», 
or data cells, «td». 


Header cells contain text describing the purpose of the columns and rows that 
they head. You may have zero or more rows of header cells to describe each 
column. You may have zero or more columns of header cells in each row to 
describe each row. Header cells and data cells may contain any content 
including nested tables, blocks, text, and objects. It is a common practice to 
restrict data cells to tabular data and header cells to text. 


You can add the colspan and rowspan attributes to a cell to have it span one or 
more columns and/or one or more rows. To prevent missing cells, you need to 
use the same number of cells in each row or to use colspan to span cells across 
multiple columns. In the second table of the example, the first cell spans two 
rows, the second cell spans two columns, and the first row is missing three cells. 


The major browsers apply box model properties in limited ways to tables, cells, 
rows, row groups, columns, and column groups. background is the only property 
that applies to all these elements. margin applies only to tables. border applies 
only to tables and cells. padding, overflow, and vertical-align apply to cells. 
text-indent, text-align, and other text-styling properties apply only to cells 
but can be inherited from row, row group, and table elements. width applies to 
tables, cells, and columns. width is important enough for the next chapter to be 
devoted to showing how it creates column layouts. 


height applies to tables, rows, and cells, and specifies the minimum height of a 
table, row, or cell. It is a minimum height because content can always expand the 
height of a cell, row, or table. Contrast this with block elements where content 
overflows a fixed-height block instead of expanding it. A percentage-height 
block assigned to a table is a percentage of the height of the table's container. 

A percentage-height block is ignored when assigned to rows and cells. In the 
example, height:1px is applied to cells, but is overridden by the height of cell 
content and padding. 


There are several unique table properties including border-collapse and 
table-layout. border-collapse is discussed in this chapter. table-layout is 
discussed in the next chapter. Additional unique table properties exist, but 
are implemented inconsistently by the major browsers: table-layout, 
border-collapse, border-spacing, caption-side, and empty-cells. 


HTML 
«table» 
<tr> 
<td colspan="NUMBER" rowspan="NUMBER"> CONTENT </td> 
</tr> 
</table> 


Tables can be used anywhere blocks can be used. 


Structural Block Elements, Terminal Block Elements (Chapter 2); Display, Table 
Box (Chapter 4); Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5); 
Margin, Border, Padding (Chapter 6); Atomic (Chapter 7); Offset or Indented 
Static Table, Aligned and Offset Static Table (Chapter 8); Structural Meaning, 
Visual Structure, Inlined (Chapter 13); all design patterns in Chapters 15 and 16 


www. cssdesignpatterns.com/table 
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Row and Column Groups 


© Row and Column Groups - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Row and Column Groups 


Row Groups 











HTML 


<h1>Row and Column Groups</h1> 


<h2>Row Groups</h2> 

«table class="example1"> 
<thead> «tr» «th»thead«/th» <th>2 «/th» <th>3 «/th» «th»4 </th> </tr> «/thead» 
<tfoot> «tr» «th»tfoot«/th» «td»10«/td» <td>11</td> «td»12«/td» </tr> </tfoot> 
<tbody> «tr» <th>tbody</th> <td>6 </td> «td»7 </td> <td>8 </td> </tr> </tbody> 

</table> 


<h2>Columns</h2> 
<table class="example2"> 
<colgroup><col class-"coli" /»«col class-"col2" /><col class-"col3" /» 
«col class-"col4" /»«col class="col5" /»«col class-"col6" /»«/colgroup» 


«tr» «td rowspan="2">1</td> «td colspan="2">2-3</td> </tr> 
«tr» <td>8</td> <td>9</td> <td> </td> <td>&nbsp;</td> «td»12«/td» </tr> 
</table> 
CSS 


table.example1 thead ( background:orange; color:black; } 
table.example1 tbody { background:gold; color:black; } 
table.example1 tfoot { background:firebrick; color:white; } 
*.coli { background:wheat; } 

.col2 { background:gold; } 

.col3 { background:orange; } 

.col4 { background:tomato; } 

.col5 { background: firebrick; } 

.col6 ( background:black; color:white; } 


* + + * * 





/* Nonessential styles are not shown */ 
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Row and Column Groups 


Problem 


Solution 


Pattern 


Location 
Related to 
See also 


You want to group together rows and columns to make it easy to style groups of 
rows and columns. 


You can optionally use the following elements to group together rows and 
columns: «thead» (table header row group), «tfoot» (table footer row group), 
«tbody» (table body row group), «colgroup» (column group), and «col» 
(column). 


Row groups are useful for styling groups of rows and cells with background, 
visibility, display:none, and text properties. You can also use descendant 
selectors to select rows and cells in row groups. On the other hand, column 
groups and columns are limited to styling with background and width. 


Row groups may surround any number of rows. You can use data cells or header 
cells in any row of any row group. You may include any number of «tbody» 
elements in a table, but you should only include at most one «thead» and one 
«tfoot». This is because a browser renders table header and footer groups once 
per table. Table header groups are placed at the beginning of the table, and the 
footer groups are placed at the end (even though footer rows are placed before 
body rows in HTML code). When a document is printed, table headers and 
footers are supposed to be repeated at the top and bottom of each page, but 
only Firefox 2 does this. Because of this, «tfoot» is unsuitable for containing 
summary data. 


Because of inheritance, cells inherit text styles assigned to tables, row groups, 
and rows. Cells cannot inherit from column groups and columns. visibility: 
hidden and display:none apply to tables, rows, row groups, and cells, but not to 
column groups and columns. background applies to all. 


Table backgrounds are layered from back to front as follows: table, column 
groups, columns, row groups, rows, and cells. Since there is no padding between 
these elements, you can only see the background of an element when its 
children have a transparent background. For example, to see a row group's 
background, its rows and cells must have a transparent background. 


A table may contain one or more column groups (<colgroup>), which may 
contain one or more columns («col»). Browsers can reliably style column groups 
and columns with only two properties: background and width. This is a problem 
and a severe limitation. In the second table of the example, I select column 
elements to apply different background colors to each column. Notice how you 
cannot see the text in cell 12, for it is black on black because browsers apply 
background:blackto column elements but not color:white. 


HTML 
«table» 
«colgroup» «col /» «/colgroup» 
«thead» «tr» «th» CONTENT «/th» «/tr» «/thead» 
«tfoot» «tr» «th» CONTENT «/th» «/tr» «/tfoot» 
«tbody» «tr» «td» CONTENT «/td» «/tr» «/tbody» 
«/table» 


This pattern applies to tables. 
Table 


www. cssdesignpatterns.com/row-groups 
www. cssdesignpatterns.com/column-groups 
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Table Selectors 


E Table Selectors - Microsoft Internet Explorer 
File Edit View Favorites Tools Help 





Table Selectors 
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HTML 


«hi»Table Selectors</h1> 
«table id="t1"> 


<thead> 
«tr class="ri"> <td class="c1">1r1 c1</td> <td class="c2">c2</td> 
<td class="c3">c3</td> <td class="c4">c4</td> 
<td class="c5">c5</td> <td class="c6">c6</td> </tr></thead> 
<tfoot> 
«tr class-"r3"» <td class="c1">r3 c1</td> «td class="c2">c2</td> 
<td class="c3">c3</td> <td class="c4">c4</td> 
<td class="c5">c5</td> <td class="c6">c6</td> </tr></tfoot> 


«tbody class="b1"> 
<tr class="r2"> <td 


class="c1">r2 c1</td> 


<td 


class="c2">c2</td> 





«td class="c3">c3</td> <td class="c4">c4</td> 
<td class="c5">c5</td> <td class="c6">c6</td> </tr></tbody> 
</table> 
CSS 
table,td,th { border:1px solid black; } /* Selecting all tables and cells */ 
td,th ( background-color:white; ] /* Selecting all cells */ 
#t1 ( border-collapse:collapse; ] /* Selecting table */ 
#t1 thead td ( font-weight:bold; } /* Selecting cells in head */ 
#t1 tfoot td ( font-style:italic; } /* Selecting cells in foot */ 
#t1 tbody td { font-variant:small-caps; } /* Selecting cells in body */ 
#t1 *.b1 td ( font-size:1.2em; } /* Selecting cells in body */ 
#t1 *.c3 { display:none; } /* Selecting cells in column */ 
#t1 *.c4 { background-color: firebrick; color:white; } 
#t1 *.r1 { background-color:gold; color:black; } /* Selecting row-no effect*/ 
#t1 *.r2 td ( background-color:gold; color:black; } /* Selecting cells in row */ 
#t1 *.r2 *.c6 ( font-size:1.8em; font-weight:bold; } /* Selecting cell */ 





/* Nonessential styles are not shown */ 
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Table Selectors 


Problem 


Solution 


Patterns 


Location 
Related to 
See also 


You want a simple, flexible, and generic way to select a column, a row, or a cell 
for styling. 


You can assign a unique ID to each table, such as t1. This allows you to select 
each table individually. You can label each row with a class that is unique within 
the table, such as r1, r2, and so on. You can label each cell with a class that is 
unique within each row, such as c1, c2, and so on. Because each table has a 
unique ID, you can reuse the same class names for rows and columns. By using 
the table ID with descendant selectors, you can select the table, any row in the 
table, any cell in any row, and any cell in any column. 


You can also enclose rows within <thead>, <tfoot>, and <tbody> elements. If you 
have multiple «tbody» elements, you can also label each one with a unique class, 
such as b1, b2, and so on. You can use descendant selectors following the table's 
ID to select and style the cells in a table header, footer, or one of the row groups 
defined by «tbody». This makes it easy to style cells in groups of rows. 


Selecting a row, table header, table footer, or table body is of little use because 
you can only style its background and even then you cannot see the background 
unless cell backgrounds are transparent. In the example, I style all cells with a 
white background. I also style the first row element with a gold background, 

but you cannot see its gold background because it is covered by the white cell 
backgrounds. On the other hand, I style cells in the second row with a gold 
background, which you can see because the selector styles cells, not the row. 
Thus, selecting cells within a row or row group is very useful. All of the following 
selector design patterns select cells. 


All Table and Cells Selector 
table,td,th ( STYLES ) 


All Cells Selector 
td,th ( STYLES } 


Table Selector 
itx ( STYLES } 


Column Cells Selector 
itx *.cx { STYLES } 


Row Cells Selector 
#tx *.xx td { STYLES } or #tx *.rx th { STYLES } 


Cell Selector 
#tx *.rx *.cx ( STYLES } 


Row Group Selector 
#tx thead td { STYLES } or #tx thead th { STYLES } 


This pattern applies to cells, rows, row groups, and tables. 
Table 


www. cssdesignpatterns.com/table-selectors 


323 





324 CHAPTER 15 ™ TABLES 


Separated Borders 


À Separated Borders - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 





Separated Borders 
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Boxed Cells 
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HTML 


«hi»Separated Borders</h1> 


<h2>Boxed Table</h2> 

<table class="boxed-table" cellspacing="5"> 

<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr></table> 


<h2>Boxed Cells</h2> 

<table class="boxed-cells" cellspacing="5"> 

<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr></table> 


<h2>Boxed Table and Cells</h2> 

<table class="boxed-table boxed-cells" cellspacing="5"> 

<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr></table> 


CSS 


table { border-collapse:separate; } 
*.boxed-table { border:1px solid black; } 
*.boxed-cells td { border:1px solid black; } 
* boxed-cells td.x { border:none; } 





/* Nonessential styles are not shown */ 
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Separated Borders 


Problem 


Solution 


Pattern 


Location 


Limitations 


Advantages 


Disadvantages 


Tips 


Related to 
See also 


You want to put independent borders around tables and cells. 


You can apply the border-collapse:separate property to a table to separate 
table borders from cell borders. You can use the border property to put a 
border around a table or around a cell. When borders are separate, borders 
around tables are distinct from borders around cells. You can use the 
cellspacing attribute to control the amount of spacing around cell borders. 


HTML 

«table cellspacing-"WIDTH"» 
«tr» «td» CONTENT «/td» «/tr» 

«/table» 


CSS 
TABLE SELECTOR ( border-collapse:separate; 
border:WIDTH STYLE COLOR; j 


CELL SELECTOR ( border:WIDTH STYLE COLOR; } 
This pattern applies to tables and cells. 


Internet Explorer 7 does not render a border around empty cells. An empty 
cell does not contain content. Whitespace is not content. In the example, 
cell 9 has no border because it is empty. In contrast, cell 10 has a border 
because it contains a nonbreaking space—even though it looks empty. 

You can prevent this problem by always putting a nonbreaking space in 
empty cells. 


No major browser renders borders or backgrounds for missing cells. Missing 
cells occur when a row has fewer cells than the table has columns and 
existing cells do not span enough columns to compensate. In the example, 
cells 4, 5, and 6 are missing. 


Browsers ignore borders applied to rows, columns, column groups, and row 
groups. This means the only way to put borders around columns or rows is to 
put them around each cell in the column or row. 


Unlike collapsed borders, separated borders do not have border conflicts 
between adjacent cells and between the table and its cells. 


Separated borders require an HTML attribute, cellspacing, to control the 
distance between cells because Internet Explorer 7 and earlier versions do 
not implement the border-spacing property. 


You can use border:none to remove a border applied by another rule. Notice 
in the example how border:none removes the border from cell 11. 


You can use border-left, border-right, border-top, and border-bottom to 
apply borders independently to each side of a cell or table. In other words, 
any side of a table or cell can have a different border width, style, and color. 


Collapsed Borders; Border (Chapter 6) 


www. cssdesignpatterns.com/separated-borders 
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Collapsed Borders 


©) Collapsed Borders - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Collapsed Borders 


Boxed Table 
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Boxed Cells 
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Boxed Table and Cells 


HTML 








<h1>Collapsed Borders</h1> 


<h2>Boxed Table</h2> 

<table class="boxed-table" cellspacing="0"> 

<tr><td rowspan="2">1</td><td colspan="2">2-3</td> </tr> 
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr></table> 


<h2>Boxed Cells</h2> 

<table class="boxed-cells" cellspacing="0"> 

<tr><td rowspan="2">1</td><td colspan="2">2-3</td> </tr> 
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr></table> 


<h2>Boxed Table and Cells</h2> 

«table class="boxed-table boxed-cells" cellspacing="0"> 

<tr><td rowspan="2">1</td><td colspan="2">2-3</td> </tr> 
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr></table> 


CSS 


table { border-collapse:collapse; } 
*.boxed-table { border:1px solid black; } 
*.boxed-cells td { border:1px solid black; } 
* boxed-cells td.x { border:none; } 


/* Nonessential styles are not shown */ 
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Collapsed Borders 


Problem 


Solution 


Pattern 


Location 


Limitations 


Advantages 


Disadvantages 


Tips 


Related to 
See also 


You want to merge table and cell borders. 


You can apply the border-collapse:collapse property to a table to merge its 
borders with its cell borders. You can use the border property to put borders 
around a table and its cells. When borders are collapsed, you must omit the 
cellspacing attribute from the table element or set it to 0 to avoid problems 
in Internet Explorer 7 and earlier versions. 


HTML 
«table cellspacing="0"> 

«tr» «td» CONTENT «/td» «/tr» 
«/table» 


CSS 
TABLE SELECTOR ( border-collapse:collapse; 
border:WIDTH STYLE COLOR; j 


CELL SELECTOR ( border:WIDTH STYLE COLOR; } 
This pattern applies to tables and cells. 


Internet Explorer 7 (and earlier versions) does not apply borders to rows, 
columns, column groups, and row groups. 


Internet Explorer 7 does not implement border:hidden. This is unfortunate 
because a hidden border has the ability to override and hide a visible merged 
border. border:none cannot override merged borders. Notice in the example 
how cell 11's border is set to border:none, but the left and bottom merged 
borders are visible because they override border:none. 


In contrast to separated borders, all major browsers render collapsed borders 
around empty cells. Notice in the example how cell 9 is empty and has a 
border; in the Separated Borders design pattern, it does not have a border. 


Unlike separated borders, collapsed borders have border conflicts between 
adjacent cells and between the table and its cells. 


When assigning collapsed borders, it is important to set both table and cell 
borders. Firefox 2 and Opera 9 in particular have bugs that render extra and 
incomplete borders when table borders are not set. Notice in the second table 
in the example how Firefox 2 adds an extra border above the missing cells. 
This is an error because the second table has no border. 


If adjacent borders have different styles, width, or color, the most visible 
border wins. Wider borders override narrower ones. Border styles override 
each other in the following order from most prominent to least: double, solid, 
dashed, dotted, ridge, outset, groove, and inset. When colors conflict, cell 
border color overrides table border color. Also, left border color overrides 
right, and top overrides bottom. 


Separated Borders; Border (Chapter 6) 


www. cssdesignpatterns.com/collapsed-borders 
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Styled Collapsed Borders 


©) Styled Collapsed Borders - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Styled Collapsed Borders 





HTML 


«hi»Styled Collapsed Borders</h1> 


«table id="t1"> 
«tr class="r1"> «td class="c1">1</td> «td class="c2">2</td> </tr> 
«tr class-"r2"» «td class="c1">1</td> «td class="c2">2</td> </tr> </table> 


CSS 


table ( border-collapse:collapse; } /* Table and cells borders */ 
table,td,th { border:5px solid red; ] 


#t1 ( border-left:1px solid black; } /* Left table border */ 
#t1 *.c1 ( border-left:1px solid black; } 


#t1 ( border-right:2px solid black; } /* Right table border */ 
#t1 *.c2 ( border-right:2px solid black; } 


#t1 *.c1 ( border-right:1px dotted black; } /* Interior column border */ 
#t1 *.c2 { border-left:1px dotted black; } 


#t1 { border-top:1px solid black; } /* Top table border */ 
#t1 *.r1 td ( border-top:1px solid black; } 


#t1 { border-bottom:2px solid black; } /* Bottom table border */ 
#t1 *.r2 td { border-bottom:2px solid black; } 


#t1 *.r1 td { border-bottom:1px dotted black; } /* Interior row border */ 
"t1 *.r2 td { border-top:1px dotted black; } 


/* Nonessential styles are not shown */ 
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Styled Collapsed Borders 


Problem 


Solution 


Patterns 


Location 


Tip 


Example 


Related to 
See also 


You want to assign borders to rows and columns in a table with collapsed 
borders. The problem is that the table shares borders with its cells, and cells 
share borders with each other. Thus, each visible border is actually two borders 
that have been merged, such as the left table border and the left border of each 
cell in the first column. If you do not style merged borders the same, a browser 
decides which of the merged borders to display, which may not be the border 
you want. 


You can use the Table Selectors design pattern to mark up the table to make it 
easy to select columns and rows of cells. 


A table with collapsed borders has six types of borders: left table border, interior 
column border, right table border, top border, interior row border, and bottom 
border. The design patterns that follow show how to style these six types of 
merged borders. 


Left Table Border 
#t1 ( border-left: WIDTH 1 STYLE 1 COLOR 1; } 
#t1 *.cx FIRST { border-left: WIDTH 1 STYLE 1 COLOR 1; } 


Right Table Border 
#t1 ( border-right: WIDTH 2 STYLE 2 COLOR 2; } 
#t1 *.cx LAST { border-right: WIDTH 2 STYLE 2 COLOR 2; } 


Interior Column Border 
#t1 *.cx ( border-right: WIDTH 3 STYLE 3 COLOR 3; } 
#t1 *.cx41 { border-left: WIDTH 3 STYLE 3 COLOR 3; } 


Top Table Border 
#t1 ( border-top: WIDTH 4 STYLE 4 COLOR 4; } 
#t1 *.rx FIRST td ( border-top: WIDTH 4 STYLE 4 COLOR 4; } 


Bottom Table Border 
#t1 { border-bottom: WIDTH 5 STYLE 5 COLOR 5; } 
#t1 *.rx LAST td { border-bottom: WIDTH 5 STYLE 5 COLOR 5; } 


Interior Row Border 
#t1 *.rx td { border-bottom: WIDTH 6 STYLE 6 COLOR 6; } 
#t1 *.rx«1 td ( border-top: WIDTH 6 STYLE 6 COLOR 6; } 


This pattern applies to cells and tables. 






































«colgroup» and «col /» cannot be used to style borders. 


When a table uses separated borders, you do not need this design pattern 
because separated borders are not shared. 


In the example, I use the table,td,td {} selector to set all table and cell borders 
to be 5 pixels wide and solid red. If you want all borders to be the same, this 
selector is all you need. The example overrides these red borders with a variety 
of smaller black borders assigned to each row and column. 


Table Selectors, Collapsed Borders; Border (Chapter 6) 


www. Ccssdesignpatterns.com/styled-collapsed-borders 
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Hidden and Removed Cells 


e Hidden and Removed Cells - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Hidden and Removed Cells 


Cell 1 is hidden and Cell 3 is removed. 
This moves cell 4 into cell 3's place and creates a missing cell at the end. 


Collapsed Borders | 1 | 2 | 3 | 4 | 
lO 








Separated Borders 1 2 3 4 
| IE] 








HTML 


<h1>Hidden and Removed Cells</h1> 


«h3»Cell 1 is hidden and Cell 3 is removed. «br /» This moves cell 4 
into cell 3's place and creates a missing cell at the end.«/h3» 


«br /»«div»Collapsed Borders«/div» 

«table class-"collapsed" cellspacing="0"> 
«tr»«td»1«/td»«td»2«/td»«td»3«/td»«td»A«/td»«/tr» 

<tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr></table> 


<br /><div>Separated Borders</div> 

<table class="separated" cellspacing="5"> 
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> 

<tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr></table> 


<!-- Many additional examples are not shown --> 


CSS 
table, td, th ( border:1px solid black; } 


*.separated ( border-collapse:separate; } 
*.collapsed ( border-collapse:collapse; ] 


*.x ( display:none; } 
*.h ( visibility:hidden; ) 


/* Nonessential styles are not shown */ 
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Hidden and Removed Cells 


Problem 


Solution 


Pattern 


Location 


Tip 


Example 


Related to 


See also 


You want to hide or remove one or more cells. 


You can use visibility:hidden to hide cells. Hidden cells are not rendered, but 
their location and the space they would have occupied is preserved. This is the 
most common way to hide a cell because it keeps cells in their proper locations. 
Notice in the example how the first cell in the second row is hidden without 
changing the location of the following cells. 


When a table has collapsed borders, the borders around hidden cells are still 
rendered. Thus, when you hide a cell in a table with collapsed borders, its 
contents are hidden, but its borders are not. Notice in the first table of the 
example how borders surround the hidden cell in the first column of the second 
row. On the other hand, borders are not rendered around hidden cells in a table 
with separate borders. In the second table in the example, there are no borders 
around the hidden cell in the first column of the second row. 


You can use display:none to remove cells. Removed cells are not rendered. It is as 
if they never existed. This means that cells to the right of removed cells slide over 
to take the place of removed cells! In the example, cell 3 is removed. Notice how 
cell 4 slides into its place. Because cell 3 is removed, there are fewer cells in the 
second row than in the first row, which creates a missing cell at the end. Thus, if 
you do not want cells to be shuffled around, you should hide cells instead of 
removing them. On the other hand, it is common to remove columns, rows, row 
groups, and tables because you typically do not want these items to leave behind 
empty space. This is explored further in the Removed and Hidden Rows and 
Columns design pattern. 


Hidden Tables, Rows, and Cells 
SELECTOR { visibility:hidden; } 


Removed Tables, Rows, and Cells 
SELECTOR { display:none; } 


This pattern applies to cells. 


When you hide a table with collapsed borders, the table’s outer borders are 

hidden and its contents are hidden, but its internal borders remain visible. To 
completely hide the table, you can assign visibility:hidden to the table and 
border:none to its cells. This is not necessary for tables with separate borders. 


The code and the screenshot shown here is a small part of the full example, 
which includes many more examples of hidden columns, hidden rows, hidden 
row groups, and hidden tables. 


Removed and Hidden Rows and Columns; Display (Chapter 4); Border, Visibility 
(Chapter 6) 


www. cssdesignpatterns.com/hidden-cells 
www. cssdesignpatterns.com/removed-cells 
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Removed and Hidden Rows and Columns 


2e) Removed and Hidden Rows and Columns - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Removed & Hidden Rows & Columns 




















HTML 


<h1>Removed &amp; Hidden Rows &amp; Columns</h1> 


«table id="t1"> 
«tbody class="b1"> 
«tr class="ri"> <td class="c1">1r1 c1</td> <td class="c2">2</td> 
«td class="c3">r1 c3«/td» <td class="c4">4</td> </tr> 


«tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">2</td> 
«td class-"c3"»r2 c3«/td» <td class="c4">4</td> </tr></tbody> 


«tbody class="b2"> 
«tr class="r3"> <td class="c1">r3 c1</td> <td class="c2">2</td> 
«td class-"c3"»r3 c3«/td» <td class="c4">4</td> </tr> 


«tr class="r4"> «td class="c1">r4 c1</td> <td class="c2">2</td> 
«td class-"c3"»r4 c3«/td» <td class="c4">4</td> </tr></tbody> 


«tbody class="b3"> 
«tr class="r5"> «td class="c1">r5 c1</td> <td class="c2">2</td> 
«td class-"c3"»r5 c3«/td» <td class="c4">4</td> </tr></tbody> 


</table> 

<!-- Second identical table with separated borders is not shown --> 
CSS 

#t1 *.c2 { display:none; } /* Removing column */ 


#t1 *.c3 ( visibility:hidden; } /* Hiding column */ 
#t1 *.r2 { visibility:hidden; } /* Hiding row */ 
#t1 *.b2 { display:none; } /* Removing row group */ 


/* Nonessential styles are not shown */ 
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Removed and Hidden Rows and Columns 


Problem You want to remove a column, a row, or a group of rows so that following 
columns slide over and following rows slide up to take the place of the removed 
row or column. You want to hide a row or column when you want to leave behind 
empty space where the row, row group, or column would have been rendered. 


Solution You can use the Table Selectors design pattern to mark up a table to make it easy 
to select any row or column. You can use display:none to remove rows, row 
groups, and columns. To remove a column, you can assign display:none to each 
cell in the column. To remove a row or a row group, you can assign display:none 
to «tr», <thead>, <tfoot>, or <tbody> elements. Removed elements are not 
rendered. It is as if they never existed. Columns on the right slide over into the 
place of removed columns. This causes a shrinkwrapped table to shrink because 
there is one less column. Rows slide up into the place of removed rows. This 
causes the height of a shrinkwrapped table to shrink. In the example, the cells in 
the second column are removed, which causes the third and fourth columns to 
slide over. Also, the third and fourth rows in the third row group are removed, 
which causes the fifth row to slide up into their place. 


You can use visibility:hidden instead of display:none to hide rows and 
columns instead of removing them. This is less common than removing rows and 
columns because it leaves blank space behind. In the example, I hide the third 
column and the second row. The space where the rows and columns would have 
been rendered remains behind. 


When columns and rows are removed, a browser does not render their borders. 
On the other hand, when columns and rows are hidden, a browser renders 
borders when borders are collapsed, but not when separated. In the first table of 
the example, borders are collapsed, and you can see the borders around hidden 
rows and columns. In the second table, borders are separated, and you cannot 
see the borders around the hidden rows and columns. 


Patterns Hidden Rows, Row Groups, and Cells 
SELECTOR { visibility:hidden; } 


Removed Rows, Row Groups, and Cells 
SELECTOR ( display:none; } 


Location This pattern applies to cells, rows, and row groups. 


Limitations You may be tempted to remove or hide columns using the two column elements: 
«colgroup» and «col /». Internet Explorer has a proprietary feature that allows 
this, but other major browsers do not. You may also want to apply visibility: 
collapse to these elements, but this does not work in Internet Explorer 7 or 
Opera 9. This design pattern is the best way to hide or remove columns. 


Related to Hidden and Removed Cells; Display (Chapter 4); Border, Visibility (Chapter 6) 


See also www. Ccssdesignpatterns.com/removed-rows-and-columns 
Www. cssdesignpatterns.com/hidden-rows-and-columns 
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Vertical-aligned Data 


©) Vertical-aligned Data - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Vertical-aligned Data 





These lines of text are 
vertically aligned to the 
top of the cell. 
These lines of text are 
vertically aligned to the 
middle of the cell. 
These lines of text are 
vertically aligned to the 
bottom of the cell. 





HTML 


<hi>Vertical-aligned Data</h1> 


<table> 
<tr> 
<td class="align-top" >These lines of text are vertically aligned 
to the top of the cell.</td> 


<td class="align-middle">These lines of text are vertically aligned 
to the middle of the cell.</td> 


<td class="align-bottom">These lines of text are vertically aligned 


to the bottom of the cell.</td></tr></table> 


CSS 


*.align-top ( height:200px; vertical-align:top; ) 
*.align-middle ( height:200px; vertical-align:middle; } 
*.align-bottom ( height:200px; vertical-align:bottom; } 


/* Nonessential styles are not shown */ 
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Vertical-aligned Data 


Problem 


Solution 


Patterns 


Location 
Related to 
See also 


You want to align multiple lines of data as a group to the top, middle, or bottom 
of a cell. 


You can place multiple lines of data in a cell and use vertical-align to 
automatically align it to the top, middle, or bottom of the cell. For this to work, 
the cell needs to have a height greater than the height of the data; otherwise, 
there is no space for the data to move up or down within the cell. 


vertical-align applies to cells and to inline elements. Just as you can use 
vertical-align to offset inline elements from the baseline, you can do the 
same to the contents of a cell. 


There are three vertical-align settings that apply in unique ways to cells. These 
are top, middle, and bottom. top is the top of the cell, middle is the middle of the 
cell, and bottom is the bottom of the cell. When top, middle, and bottom are 
applied to inline elements, top is the top of the line, bottom is the bottom of 

the line, and middle is roughly the middle of the line. 


What is unique and useful about top, middle, and bottom when applied to a cell is 
that they align the entire contents of a cell including multiple lines of content to 
the top, middle, or bottom of the cell. In contrast, when you apply vertical-align 
to an inline element, it aligns an inline element to another inline element within 
a line. In other words, vertical-align positions inline elements in relation to 
each other within a single line, whereas vertical-align applied to a cell 
vertically positions its content within the cell—including multiple lines of 
content. 


There is no other mechanism in CSS and HTML that can vertically align multiple 
lines of content. The closest approximations are the absolute design patterns that 
vertically align an element (not its content) to the top, middle, or bottom of its 
closest positioned ancestor. These design patterns include Align Top, Align 
Middle, and Align Bottom. The main problem with absolute design patterns is 
that they remove elements from the flow. A cell can align its contents without 
leaving the normal flow. 


HTML 
«table»«tr»«td class-"ALIGNMENT"» CONTENT «/td»«/tr»«/table» 


CSS 

*.align-top { height:+VALUE; vertical-align:top; } 
*.align-middle { height:+VALUE; vertical-align:middle; } 
* align-bottom ( height:+VALUE; vertical-align:bottom; } 


This design pattern works on any cell. 
Vertical-aligned Content, Vertical-offset Content (Chapter 12) 


www. cssdesignpatterns.com/vertical-aligned-data 
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Striped Tables 


Striped Tables - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Striped Tables 








HTML 


<h1>Striped Tables</h1> 


<table id="t1"> 


«tr class="r1 odd"> <td 
<td 
«tr class="r2"> <td 
<td 
<tr class="r3 odd"> <td 
<td 
<tr class="r4"> <td 
<td 
<tr class="r5 odd"> <td 
<td 
</table> 
css 


C 
C 


C 
C 


A 


C 


C 
C 


C 
C 


lass="c1">r1 
lass-"c3"» 


lass-"ci"»r2 
lass-"c3"» 


lass="c1">1r3 
lass-"c3"» 


lass="c1">1r4 
lass-"c3"» 


lass="c1">1r5 
lass-"c3"» 





#ts td ( background:white; } 
itti *.odd td { background:palegreen; } 
#t1 td.c3 ( background:darkgreen; color:white; } /* 


/* Nonessential styles are not shown */ 


c1</td> 
c3«/td» 


c1</td> 
c3«/td» 


c1</td> 
c3«/td» 


c1</td> 
c3«/td» 


c1</td> 
c3«/td» 


«td 
«td 


«td 
«td 


«td 
«td 


«td 
«td 


«td 
«td 


/* 
/* 





class="c2">c2</td> 
class="c4">c4</td> </tr> 


class="c2">c2</td> 
class="c4">c4</td> </tr> 


class="c2">c2</td> 
class="c4">c4</td> </tr> 


class="c2">c2</td> 
class="c4">c4</td> </tr> 


class="c2">c2</td> 
class="c4">c4</td> </tr> 


Background of all cells */ 
Alternating Row Background */ 
Column Background */ 
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Striped Tables 


Aliases 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Tips 


Related to 


See also 


Greenbar, Zebra Stripes 


You want to style alternating rows with different background colors—much 
like reports printed on greenbar paper. 


You can optionally assign a standard background color to all cells or leave 
them all transparent. You can add a class to odd rows, even rows (or any 
arbitrary row for that matter), and you can use this class to select and style 
the background of cells in these rows. You can optionally style the backgrounds 
of cells in columns as well. 


HTML 

«table»«tr»«td class="ALIGNMENT"> CONTENT «/td»«/tr»«/table» 
CSS 

STABLE ID *.odd td { background:COLOR; } 

or 


#TABLE_ID *.odd th { background:COLOR; } 
This pattern applies to cells in a row. 


Styling alternate rows in alternating background colors makes it easier to read 
extra wide tables. It also promotes the user to read data in rows. 


When styling the backgrounds of columns, it takes careful planning and 

color coordination to make the background of columns blend well with the 
alternating backgrounds of rows. Furthermore, if you want a column 
background to override an alternating row background, you need to make 
sure the column selector has a higher priority in the cascade order than the 
row selector. In the example, I made the column selector equal priority to the 
alternating selector by using #t1 td.c3 instead of #t1 *.c3, and I made ita 
higher priority by placing it after the alternating row selector in the stylesheet. 


The most important point of this simple design pattern is selecting and 
styling cells within rows. If you style the background of a row element, you 
will not see the background unless the background of each cell in the row is 
transparent. This is because the background of each cell overlays the 
background of its row. Even when you use separated borders, the spacing 
between cells does not reveal a row's background, it reveals the table's 
background. Thus, this design pattern uses the descendant operator to 
select and style the cells in a row rather than the row itself. 


In addition to background, you may also want to style border and padding 
differently for alternating cells. You may also want to style text properties 
differently, such as font-size, font-style, font-variant, font-weight, 
text-decoration, text-transform, line-height, letter-spacing, and 
word-spacing. 


Border, Padding, Background (Chapter 6); Font (Chapter 10); Spacing 
(Chapter 11) 


WwWw.Ccssdesignpatterns.com/striped-Tables 
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Tabled, Rowed, and Celled 


6) Tabled, Rowed, and Celled - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Tabled, Rowed, and Celled 


Before 





division 


After being rendered as a table with rows and cells 
division | division 








HTML 


«hi»Tabled, Rowed, and Celled</h1> 


<h2>Before</h2> 
<div> 
<div> 
«div»division«/div» 
«div»division«/div»«/div» 
«span» 
<Span>span</span> 
<span>span</span></span></div> 


<h2>After being rendered as a table with rows and cells</h2> 
<div class="tabled"> 
<div class="rowed"> 
<div class="celled">division</div> 
<div class="celled">division</div></div> 
«span class="rowed"> 
<span class="celled">span</span> 
<span class="celled">span</span></span></div> 


CSS 
div,span ( border:1px solid black; background-color:gold; padding:5px; } 
*.tabled ( display:table; border-collapse:collapse; ] 


*.rowed ( display:table-row; } 
*.celled ( display:table-cell; } 
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Tabled, Rowed, and Celled 


Problem 


Solution 


Patterns 


Location 


Limitations 


Example 


Related to 
See also 


You want to render ordinary inline and block elements as tables, rows, and cells. 


You can use the display:table, display:table-row, and display:table-cell 
rules to transform elements into tables, rows, and cells. 


Typically you nest an element rendered as a cell within an element rendered as a 
row. In turn, you nest an element rendered as a row within an element that is 
rendered as a table. It does not matter what type of element is used as long as it 
is valid XHTML. A table can be created completely out of inline elements, block 
elements, or a mixture of both. 


You can also render an element as a stand-alone cell, and a browser will 
automatically create a row box and table box. Since tables shrinkwrap by default 
and since blocks stretch by default, rendering a block as a cell is a good way to 
shrinkwrap it without having to leave the normal flow. 


HTML 
«ELEMENT class="tabled"> 
«ELEMENT class="rowed"> 
«ELEMENT class="celled"> CONTENT </ELEMENT> 
«ELEMENT class="rowed"> 
«/ ELEMENT» 


CSS 

*.tabled ( display:table; border-collapse:collapse; } 
*.rowed ( display:table-row; } 

*.celled ( display:table-cell; j 


This pattern applies to block and inline elements. 


This pattern does not work in Internet Explorer 7 or earlier versions. This is 
unfortunate because this is a very useful design pattern. If Internet Explorer 
supported this part of the CSS standard, you could take advantage of all the 
unique features offered only by tables. For example, an element displayed as a 
table automatically shrinkwraps instead of stretches—without leaving the 
normal flow. This is very useful when you want to create shrinkwrapped buttons, 
menus, boxes around images, and so on. Displaying an element as a table also 
allows you to lay out its child elements using the many powerful and automatic 
layouts presented in Chapter 16. In short, you can take nontabular elements and 
lay them out in rows and columns for pure presentational pleasure without guilt. 


In the example, I transform four divisions and three spans into a table with two 
rows and two columns. Notice how block elements and inline elements can be 
combined to create a table. 


Table; Display, Table Box (Chapter 4); Blocked (Chapter 11); Inlined (Chapter 13) 


www. cssdesignpatterns .com/tabled-rowed-celled 
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Table Layout 


© Table Layout - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Table Layout 
Shrinkwrapped Table 


auto|auto 


Sized Table 


Stretched Table 
palo “Yoo mat 
auto 


Fixed Table 





100 
auto 





HTML 


«hi»Table Layout</h1> 


<h2>Shrinkwrapped Table</h2> 
<table class="auto-layout shrinkwrapped"> 
<tr><td>auto</td><td>auto</td></tr></table> 


<h2>Sized Table</h2> 
<table class="auto-layout sized"> <tr><td>auto</td><td>auto</td></tr></table> 


<h2>Stretched Table</h2> 
«table class="auto-layout stretched"> «tr»«td»auto«/td»«td»auto«/td»«/tr»«/table» 


<h2>Fixed Table</h2> 
«table class="fixed-layout sized"> <tr><td>auto</td><td>auto</td></tr></table> 


CSS 


.auto-layout { table-layout:auto; } 
.fixed-layout { table-layout:fixed; } 
.shrinkwrapped { width:auto; } 

.sized { width:350px; } 

.stretched { width:100%; } 


* + + * X 


/* Nonessential styles are not shown */ 
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Table Layout 


Problem 


Solution 


Patterns 


Location 


Tip 


Related to 


See also 


You want to create shrinkwrapped, sized, stretched, or fixed tables. 


There are four types of tables: shrinkwrapped, sized, stretched, and fixed. Each 
has unique capabilities for laying out columns. These layouts are explored in 
detail in the next chapter. 


A shrinkwrapped table shrinks to the width of its columns and will not expand 
beyond the width of its container. A sized or stretched table can lay out its 
columns in proportion to the table's width, and can expand beyond the width of 
its container. A fixed tableis a variation of a sized or stretched table, except it 
ignores the width of its content when laying out columns. This greatly speeds the 
rendering and prevents content from expanding a column's width. 


The following two properties assigned to a table determine the type of table: 
table-layout and width. 


There are two values for table-layout: auto and fixed. The default value is auto. 
An auto-layout table lays out columns based on the minimum and maximum 
widths of cell contents and on the width assigned to its cells. A fixed-layout table 
ignores content and lays out columns based only on the width assigned to the 
cells in its first row. 


The type of width assigned to the table determines whether a table is 
shrinkwrapped, sized, or stretched. There are three types of width: auto, fixed, 
and percentage. An auto width is created using width:auto. A fixed width is 
created using width:VALUE, such as width: 100px. A percentage width is created 
using width: PERCENT%, such as width: 100%. 


A shrinkwrapped table is auto layout and auto width. A stretched table is auto 
layout and has a percentage width of 100%. A sized table is auto layout and fixed 
width, or has a percentage width other than 100%. A fixed table is fixed layout 
and has a fixed width or percentage width. 


Shrinkwrapped Table 

TABLE SELECTOR { table-layout:auto; width:auto; } 

Sized Table 

TABLE SELECTOR { table-layout:auto; width:VALUE OR PERCENT; } 
Stretched Table 

TABLE SELECTOR { table-layout:auto; width:100%; } 

Fixed Table 

TABLE SELECTOR { table-layout:fixed; width:VALUE OR PERCENT; } 








This pattern applies to table elements. 


A good way to set the width of columns is to assign width to each cell in the first 
row of the table. This works in fixed-layout and auto-layout tables, and it does 
not require «colgroup» and «col» elements. 


Table; Sized, Shrinkwrapped, Stretched (Chapter 5); Offset or Indented Static 
Table, Aligned and Offset Static Table (Chapter 8); all design patterns in 
Chapter 16 


www. cssdesignpatterns.com/table-layout 
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Column Layout 


B... have many built-in capabilities for automatically sizing columns in tables. This 
chapter shows how to harness these automatic features to shrinkwrap columns, size them 
to specific widths, size them proportionally to each other, size them proportionally to their 
content, size them equally, size them flexibly, and undersize or oversize them. 


Table Layout Models 


There are four types of tables: shrinkwrapped, sized, stretched, and fixed. Each type of table 
has unique column layouts that only it can create. 

The main purpose of a shrinkwrapped table is shrinking columns to fit their content. 

The main purpose of a sized or stretched table is proportionally dividing its width among its 
columns. The main purpose of a fixed table is setting its columns to fixed widths and speeding 
the rendering of the table. 

Shrinkwrapped tables shrink to fit their content. This gives them the unique capability to 
shrink columns to fit the width of their content. A shrinkwrapped table can be narrower than 
its container and will not expand beyond the width of its container. Shrinkwrapped tables are 
the best choice when you want flexible layouts that adapt to different devices, screen resolu- 
tions, and viewport sizes. The following unique layouts apply to shrinkwrapped tables: 
Shrinkwrapped Columns, Sized Columns, Equal Content-sized Columns, and Inverse- 
proportioned Columns. 

Sized and stretched tables divide their width proportionally among their columns while 
ensuring no column is narrower than its content. Sized and stretched tables work exactly the 
same when laying out columns. The only difference is that a sized table can be narrower or 
wider than its container, and a stretched table stretches to the width of its container. The fol- 
lowing layouts apply to stretched tables: Content-proportioned Columns, Size-proportioned 
Columns, Percentage-proportioned Columns, Equal-sized Columns, and Flex Columns. 

Fixed tables are a variation of sized or stretched tables. They can be sized or stretched, 
but not shrinkwrapped. They are different from sized and stretched tables in that they ignore 
the width of their content when laying out columns. This prevents a cell's content from having 
any influence over a column's width. Because fixed tables ignore content, they render much 
faster than the other types of tables. For shrinkwrapped, sized, and stretched tables, a browser 
must wait for the entire table to download so it can calculate the minimum and maximum 
width of the content in each cell before it can even begin rendering the table. Fixed tables can 
be rendered progressively as soon as the first row downloads. Fixed tables can size columns 
smaller than their content and wider than the table width. Fixed tables have unique support 
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for Sized Columns and Undersized Columns. Fixed tables support all the layouts of sized 
and stretched tables except for Content-proportioned Columns. These layouts include Size- 
proportioned Columns, Percentage-proportioned Columns, Equal-sized Columns, and Flex 
Columns. 

The type of layout algorithm chosen by the browser depends on the type of table and on 
the type of width assigned to its cells. In other words, it makes a big difference whether you 
assign a value of auto, 100px, or 20% to a cell. Not only are these different widths, but they are 
also different types of width: auto, fixed, or percentage. These different types of width com- 
bined with the type of table cause the browser to use different algorithms for sizing columns. 

A value of auto assigned to width creates an auto width. A measurement assigned to 
width, such as pixels or ems, creates a fixed width. A percentage assigned to width, such as 
50%, creates a percentage width. 

Finally, a browser examines the width assigned to all cells in the same column in all rows 
to determine the column width and the type of column width. How a browser reconciles dif- 
ferent cell widths in the same column is explained in the Column Width design pattern. Also, 
assigning different types of width to different columns causes the browser to use multiple lay- 
out algorithms in the same table. How a browser combines column layouts is explained in the 
Mixed Column Layouts design pattern. 

Even though a browser examines the width of all cells in nonfixed tables to determine the 
column width, you only need to assign a width to the cells in the first row. 

The following design patterns are created by combining the four types of tables with the 
three types of widths. 


Using Column Layouts 


For many years, designers and developers have used the many automatic and powerful layout 
features of columns to lay out nontabular content. In fact, this extensive use has promoted 
browser venders to enhance these capabilities more than any other feature. It has also caused 
the major browser vendors to ensure column layouts work consistently and are bug free. 

Even though you can use column layouts to lay out nontabular data, I do not recommend 
it because it leads to less-accessible content. 

The purpose of this chapter is to show you how to lay out tabular data. Tabular data needs 
to be styled and laid out. Each example in this chapter shows how you can automatically lay 
out columns using the many powerful and automatic algorithms built into browsers. 


Chapter Outline 


* Column Width shows how a browser calculates the column width when cells in the 
same column in different rows have different widths, different types of widths, different 
minimum content widths, and different maximum content widths. This pattern applies 
to shrinkwrapped, sized, and stretched tables. 


* Shrinkwrapped Columns shows how to shrinkwrap columns to fit the width of their 
content. This pattern applies to shrinkwrapped tables. 
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Sized Columns shows how to assign fixed widths to columns while keeping the table's 
width within a minimum or maximum value. This pattern applies to shrinkwrapped or 
fixed tables. 


Content-proportioned Columns shows how to automatically distribute a table's width 
among its columns proportionally to the width of the content in each column. Columns 
with wider content are assigned to a wider width than columns with narrower content. 
This pattern applies to sized and stretched tables. It also applies to shrinkwrapped 
tables when their content stretches them to the width of their containers. 


Size-proportioned Columns shows how to automatically distribute a table's width 
among its columns proportionally to the width assigned to each column. In this design 
pattern, a browser does not necessarily render a column at its assigned width. Instead, 
itrenders a column proportionally to the widths assigned to other columns. This pat- 
tern applies to sized, stretched, and fixed tables. It also applies to shrinkwrapped tables 
when assigned cell widths stretch them to the width of their containers. 


Percentage-proportioned Columns shows how to distribute a tables width among its 
columns proportionally to the percentage assigned to the width of each column. In this 
design pattern, a browser does not necessarily render a column at its assigned percent- 
age of the table's width. Instead, it renders a column proportionally to the percentages 
assigned to other columns. This pattern applies to sized, stretched, and fixed tables. 


Inverse-proportioned Columns shows how to size columns in proportion to their con- 
tent. For example, a cell can be sized to be double the width of its content. This pattern 
applies to shrinkwrapped tables. 


Equal Content-sized Columns shows how to automatically shrink a table to its smallest 
possible width while sizing all columns equally. In other words, it sets all columns to the 
same width while using the smallest possible width that will display each cell's content. 
It creates compact tables with uniform columns. It works best with tables containing 
numbers and short text. This pattern applies to shrinkwrapped tables. 


Equal-sized Columns shows how to automatically divide a table's width into equal pro- 
portions for each cell. This pattern applies to sized, stretched, and fixed tables. 


Undersized Columns shows how to create columns that are narrower than their 
content. This pattern applies to fixed tables. 


Flex Columns shows how to create dynamically sized columns alongside fixed-width or 
percentage-width columns. These columns fill in the space not taken by sized or per- 
centage cells. As a table's container grows or shrinks, so do flex columns. This pattern is 
most useful when applied to stretched and fixed tables, but also applies to sized tables. 


Mixed Column Layouts shows how to combine fixed-width, percentage-width, and 
auto-width columns to create additional layouts. It Shows how browsers assign differ- 
ent priorities to fixed-width, percentage-width, and auto-width columns depending on 
whether a table is shrinkwrapped, sized, stretched, or fixed. 
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Column Width 


© Column Width - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 
Column Width 


Percentage widths trump fixed widths, which trump auto widths. 


100 200 300 400 500 600 
GI auto auto auto auto 





HTML 


<h1>Column Width</h1> 
«h2»Percentage widths trump fixed widths, which trump auto widths .</h2> 


<table class="auto-layout sized"> 
<tr> «td class="a i">auto</td><td class="a">auto</td> <td class="a">auto</td> 





«td class="a">auto</td> <td class-"a"»auto«/td»«/tr» 

<tr> <td class="a">auto</td> <td class="b i">75px</td> <td class="b">75px</td> 
«td class="b">75px</td> <td class="b">75px</td></tr> 

<tr> «td class="a">auto</td> <td class="a">auto</td> <td class="c i">150px</td> 
«td class="c">150px</td> <td class-"c"»150px«/td»«/tr» 

<tr> «td class="a">auto</td> <td class="a">auto</td> <td class="a">auto</td> 
<td class-"d i">10%</td> «td class="d">10%</td></tr> 

<tr> «td class="a">auto</td> <td class="a">auto</td> <td class="a">auto</td> 
<td class="a">auto</td> <td class="e i">50%</td></tr> 


</table> 


CSS 


*.i { background-color:black; color:white; font-weight:bold; } 
*.auto-layout ( table-layout:auto; } 
*.sized { width:700px; } 


{ width:auto; } 
{ width:75px; } 
{ width:150px; } 
{ width:10%; } 

{ width:50%; } 


* * * * X 
"7 «0 oc Oo 


/* Nonessential styles are not shown */ 


Column Width 


Problem 


Solution 


Location 


Example 


Related to 
See also 
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You want to know how a browser chooses the width of a column when you assign 
different widths to cells in the same column in different rows. 


This design pattern is the algorithm built into each browser that determines the 
width of a column. You do not have to do anything to use this pattern. 


Itis simplest to assign widths only to cells in the first row. However, you may 
want to assign different styles with different widths to arbitrary cells in a table, 
and let a browser figure out the width of a column. 


ANOAVT NINN109 


This design pattern does not apply to fixed tables, because a browser determines 
column widths using only the widths of cells in the first row. Content in 
subsequent rows is truncated when it exceeds the column width. The following 
discussion applies only to nonfixed tables. 


A browser assigns a minimum content width to each cell. This is the minimum 
width needed to display cell content. On nonfixed tables, a browser will not 
shrink a column smaller than this width. For text, the minimum content width 
is the width of the widest word in the cell. For a replaced element, such as an 
image, it is the width of the replaced element. 


A browser assigns a maximum content width to each cell. This is the width of a 
cell’s content up to the width of the table’s container. Some design patterns use 
this width to size or proportion columns. 


A browser downloads the entire table and scans all its rows to determine the 
following for each column: width type, maximum width value, minimum content 
width, and maximum content width. 


A browser uses the following rules to reconcile different types and values: 
1. A column defaults to auto width. 

2. A fixed width changes the columns type to fixed width. 

3. A percentage width changes the columns type to percentage width. 

4. A larger fixed width replaces a smaller one. 

5. Alarger percentage width replaces a smaller one. 

6. Alarger minimum content width replaces a smaller one. 

7. Alarger maximum content width replaces a smaller one. 


A browser chooses a layout design pattern based on the type of table and the 
type of each column (auto, fixed, or percentage width). The column is sized using 
the largest width value in the column that matches its type. 


This pattern applies to shrinkwrapped, sized, and stretched tables. 


The table is 700 pixels wide. The second column in the example is 75 pixels wide, 
showing how a fixed-width cell overrides an auto cell in the same column. The 
third column is 150 pixels wide, showing how a larger fixed-width value (150px) 
overrides a smaller one (75px). The fourth column is 70 pixels wide, showing how 
a percentage-width cell (10%) overrides a fixed-width cell (150px) in the same 
column. The fifth column is 350 pixels wide, showing how a larger percentage 
width (50%) overrides a smaller one (10%). 


All the design patterns in this chapter 


www. cssdesignpatterns.com/column-width 
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Shrinkwrapped Columns 


© Shrinkwrapped Columns - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Shrinkwrapped Columns 
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auto (less content - |auto (extra content turns shrinkwrapped columns into 
less width) content-proportioned columns) 


HTML 





<h1>Shrinkwrapped Columns</h1> 


«table class="auto-layout shrinkwrap"» 
<tr> 
<td class="shrinkwrap">auto</td> 
<td class-"shrinkwrap"»auto«/td» 
</tr> 
</table> 


<br /> 


<table class="auto-layout shrinkwrap"> 
<tr> <td class="shrinkwrap">auto (less content - less width)</td> 
<td class="shrinkwrap">auto (extra content turns shrinkwrapped columns 
into content-proportioned columns)«/td»«/tr»«/table» 


CSS 


table ( border-collapse:collapse; } 
td ( overflow:hidden; } 


*.auto-layout ( table-layout:auto; ] 
*.shrinkwrap ( width:auto; } 


/* Nonessential styles are not shown */ 


Shrinkwrapped Columns 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Tips 
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Related to 
See also 
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You want to shrinkwrap columns to fit the width of their content. 


You can shrinkwrap columns by applying table-layout:auto and width:auto 
to the table and width:auto to its cells. Since these rules are the default, this 
happens by default. 


The width of each cell expands to its maximum content width, which is the 
width of a cell's content up to the width of the table's container. The content 
can expand a table up to the width of the table's container. If this happens, the 
cells are laid out using the Content-proportioned Columns design pattern. 


HTML 
«table» 
«tr» 
«td» CONTENT «/td» 
</tr> 
</table> 


CSS 
TABLE SELECTOR ( width:auto; table-layout:auto; ] 
CELL SELECTOR { width:auto; } 


This pattern applies to shrinkwrapped tables. 


ANOAVT NINN109 


Browsers use this design pattern by default because it is the most adaptable 
and natural. It automatically sizes columns and tables to fit their content. 

It adapts automatically to any device and display size. This is a very powerful 
feature that requires a lot of code to implement in other graphical user 
interfaces. 


A browser determines the layout of columns. Other design patterns allow 
you to control column width, to size columns equally, or to size them 
proportionally. 


The only time shrinkwrapped columns can expand a table beyond the 
width of its container is when the combined minimum content width of 
each column is greater than the width of the container. For example, 
replaced elements, such as images, tables nested in cells, or text set to 
white-space:nowrap can easily expand a shrinkwrapped table beyond the 
width of its container. This causes the table to overflow its container. 


The first table in the example shows how cells can shrinkwrap to fit their 
content. The second table shows how wider content expands a table up to 
the width of its container and automatically uses the Content-proportioned 
Columns design pattern to lay out columns. 


Content-proportioned Columns 


www.cssdesignpatterns.com/shrinkwrapped-columns 
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Sized Columns 


© Sized Columns - Mozilla Firefox 


Eile Edit View Go Bookmarks Tools Help 


Sized Columns 
Shrinkwrapped Table 
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100 po 
200px 300px 


Fixed Table 





Maximum-width Sized Columns 


100 200 
200px 300px 


Minimum-width Sized Columns 








100 200 


300 
200px 300px 





HTML 


<h1>Sized Columns</h1> 
<h2>Shrinkwrapped Table</h2> 
<table class="auto-layout shrinkwrapped"> 
<tr> <td class="sized1">200px</td> «td class="sized2">300px</td></tr></table> 


<h2>Fixed Table</h2> 
<table class="fixed-layout min-width1"> 
<tr> <td class="sized1">200px</td> «td class="sized2">300px</td></tr></table> 


<h2>Maximum-width Sized Columns</h2> 
<div class="sized2"> 
<table class="auto-layout shrinkwrapped"> 
<tr> <td class="sized1">200px</td><td class="sized2">300px</td></tr></table></div> 


<h2>Minimum-width Sized Columns</h2> 
<table class="fixed-layout min-width2"> 
<tr> <td class="sized1">200px</td> «td class="sized2">300px</td></tr></table> 


CSS 


.auto-layout { table-layout:auto; } 

.fixed-layout ( table-layout:fixed; } 

.shrinkwrapped { width:auto; } 

.min-widthi ( width:1px; ) *.min-width2 { width:700px; } 
.sizedi { width:200px; } *.sized2 { width:300px; } 


* * * * * 


/* Nonessential styles are not shown */ 


Sized Columns 


Problem 


Solution 
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See also 
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You want to assign fixed widths to columns while keeping the table's width 
within a minimum or maximum value. 


You can size columns by applying table-layout:auto and width:auto to the table 
and width:VALUE to its cells. If the total width of the columns is greater than the 
width of the container, the layout changes to the Sized-proportioned Columns 
design pattern. I call this the Maximum-width Sized Columns design pattern 
because columns are rendered at the width you assigned only as long as their 
total width is less than or equal to the width of the table's container. In other 
words, the container's width sets the maximum width of the table. Finally, 
regardless of the assigned width, columns cannot be smaller than their 
minimum content width. 


ANOAVT NINN109 


You can also size columns by applying table- layout: fixed and width:MIN WIDTH 
to the table and width: VALUE to cells in the first row. If you assign a 1-pixel width 
to the table, a browser will expand the table as necessary to fit the fixed width 

of its cells. There is no maximum width—the table overflows its container as 
needed to ensure its columns are sized to their assigned width. If you assign a 
larger width to the table than the total width of the columns, the layout changes 
to the Sized-proportioned Columns design pattern. I call this the Minimum- 
width Sized Columns design pattern because columns are rendered at the width 
you assigned only as long as their total width is greater than or equal to the width 
assigned to the table. Finally, minimum content width has no effect on column 
width. 


Maximum-width Sized Columns 

HTML 

<table> <tr> <td> CONTENT </td> </tr> </table> 
CSS 

TABLE SELECTOR { width:auto; table-layout:auto; } 
CELL SELECTOR ( width:VALUE; } 


Minimum-width Sized Columns 

HTML 

«table» «tr» «td» CONTENT «/td» «/tr» «/table» 

CSS 

TABLE SELECTOR { width:MIN WIDTH; table-layout:fixed; } 
CELL SELECTOR ( width:VALUE; } 


This pattern applies to shrinkwrapped or fixed tables. 


The columns in all four tables are sized the same. The first column is 200 pixels, 
and the second is 300 pixels. The difference is the type of table (fixed or 
shrinkwrapped) and the table's width or its container's width. 


Sized-proportioned Columns 


www. cssdesignpatterns.com/sized-columns 
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Content-proportioned Columns 


© Content-proportioned Columns - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Content-proportioned Columns 
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Sized Table 


100 200 300 x 400 500 600 
auto auto (more content - more width) 





Stretched Table 
100 200 i 300 | 400 500 | 600 
auto (same content - same width) auto (same content - same width) 


Shrinkwrapped Table 


100 200 300 400 3 500 600 
auto (less content - auto (extra content turns shrinkwrapped columns into 
less width) content-proportioned columns) 


HTML 





<h1>Content-proportioned Columns</h1> 


<h2>Sized Table</h2> 
<table class="auto-layout sized"> 
<tr> «td class="auto-width">auto</td> 
<td class="auto-width">auto (more content - more width)</td></tr></table> 


<h2>Stretched Table</h2> 
<table class="auto-layout stretched"> 
<tr> <td class="auto-width">auto (same content - same width)</td> 
«td class="auto-width">auto (same content - same width)«/td»«/tr»«/table» 


«h2»Shrinkwrapped Table«/h2» 
«table class-"auto-layout shrinkwrapped"» 
«tr» «td class-"auto-width"»auto (less content - less width)«/td» 
«td class="auto-width">auto (extra content turns shrinkwrapped columns 
into content-proportioned columns)«/td»«/tr»«/table» 


CSS 

*.auto-layout ( table-layout:auto; ] 
*.fixed-layout ( table-layout:fixed; ] 
*.sized { width:700px; } 

* stretched { width:100%; } 
*.shrinkwrapped { width:auto; } 

* 


.auto-width { width:auto; } 


/* Nonessential styles are not shown */ 
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You want columns to fill the specified width of a table, and you want columns 
with wider content to have a wider width than columns with narrower 
content. In other words, you want to distribute a tables width automatically 
among its columns while keeping the table stretched or sized, and you want 
columns to be sized proportionally to the width of their content. 


ANOAVT NINN109 


You can size columns proportionally to the width of their content by applying 
table-layout:auto and width:VALUE OR PERCENT to the table and width: auto 
to its cells. In other words, you size or stretch the table and make cells auto 
width. A browser automatically calculates the maximum content width of 
each column and totals the maximum content widths of all columns. It then 
sizes each column based on the percentage of its maximum content width 
divided by the total maximum content width of all columns. Thus, it gives 
columns with a larger maximum content width a proportionally larger width 
compared to cells with a smaller maximum content width. 


A shrinkwrapped table cannot expand beyond the width of its container. 
When content expands a shrinkwrapped table to the full width of its 
container, the table behaves as if it were stretched and turns shrinkwrapped 
columns into content-proportioned columns. 


HTML 
«table» «tr» «td» CONTENT «/td» «/tr» «/table» 


CSS 
TABLE SELECTOR { width:VALUE OR PERCENT; table-layout:auto; } 
CELL SELECTOR { width:auto; } 


This pattern applies to sized and stretched tables. It also applies to 
shrinkwrapped tables when their content stretches them to the width of 
their containers. It does not apply to fixed tables. 


Sized and stretched tables are particularly useful when you have multiple 
tables that you want to be the same size. This gives a document a consistent 
look and feel. Stretched tables have an advantage over sized tables in that 
they automatically resize to fit smaller displays. 


Sized tables do not adapt to small displays, such as mobile devices. 


In the example, the first table is sized, and its first column is smaller than its 
second column because it has less content. Notice that both columns are 
wider than they would have been if they were shrinkwrapped. In the second 
table, both columns have identical content, and the browser makes them the 
same size. The third table is shrinkwrapped, but its content stretches the table 
to the width of its container. This makes its columns content proportioned. 
Notice how the second column is twice as wide as the first column because its 
content is twice as wide. 


Shrinkwrapped Columns 


www.cssdesignpatterns.com/content-proportioned-columns 
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Size-proportioned Columns 


© Sized-proportioned Columns - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Sized-proportioned Columns 


= 
S 
E 
= 
= 
E 
= 
(=) 
[2] 


Sized or Stretched Table 


100 00 300 400 — 500 600 | 
100px 300px 





Shrinkwrapped Table 
100 do 300 400 500 | "60 
1000px 3000px 


Fixed Table 





HTML 


«hi»Sized-proportioned Columns</h1> 
<h2>Sized or Stretched Table</h2> 
<table class="auto-layout stretched"> 
<tr> <td class="size3">100px</td> 
<td class="size4">300px</td></tr></table> 


<h2>Shrinkwrapped Table</h2> 
<table class="auto-layout shrinkwrapped"> 
«tr» «td class="size1">1000px</td> 
«td class="size2">3000px</td></tr></table> 


«h2»Fixed Table«/h2» 
«table class="fixed-layout sized"> 
<tr> <td class="size3">100px</td> 
«td class="size4">300px</td></tr></table> 


CSS 

*.auto-layout ( table-layout:auto; ] 

*.fixed-layout ( table-layout:fixed; ] 

*.sized ( width:700px; } 

*.stretched ( width:100%; } 

*.shrinkwrapped { width:auto; } 

*.size1 ( width:1000px; } *.size2 { width:3000px; } 
* 


.size3 { width:100px; j *.size4 { width:300px; } 


/* Nonessential styles are not shown */ 
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You want columns to fill the specified width of a table, and you want columns 
with larger width to be proportionally wider than columns with smaller width. 
In other words, you want to distribute a table’s width among its columns 
proportionally to each columns assigned width. 


You can size columns proportionally to their width by applying 
table-layout:auto and width:VALUE OR PERCENT to the table and width:VALUE 
to its cells. In other words, you size or stretch the table and assign fixed widths 
to cells. 


100AV 1NIA(TIOS 


When all column widths, padding, borders, and cell spacing add up to the width 
you assign to the table, a browser renders each column at the exact width you 
assigned. Since this is tedious to calculate and error prone, it is easy for column 
widths to add up to more or less than the table's width. When this happens, a 
browser renders a column proportionally to the widths you assigned to other 
columns. 


HTML 
«table» «tr» «td» CONTENT «/td» «/tr» «/table» 


CSS 
TABLE SELECTOR { width:VALUE OR PERCENT; table-layout:auto; } 
CELL SELECTOR ( width:VALUE; } 


This pattern applies to sized and stretched tables. 


This pattern applies to a shrinkwrapped table when the total width of all its 
columns is greater than the width of its container. This stretches it to the sides 
of its container, causing it to behave like a stretched table. 


This pattern applies to a fixed table when the total width of all its columns is less 
than the width assigned to the table. In contrast, if the total width of the columns 
is greater than the width of a fixed table, the width of the table expands, and the 
columns are not size proportioned. 


Size-proportioned columns give you the ability to specify the relative size of each 
column in relation to the other columns while preserving the width you assigned 
to the table. Size-proportioned columns are most common in stretched and 
sized tables where you want multiple tables to have a uniform width and you 
want to tweak the width of individual columns. 


Since the widths you assign to columns are proportional, you can make widths 
huge or tiny because only the ratio between widths matters. 


Notice how the columns in the shrinkwrapped table had to be set to a width 
large enough to stretch the table to the width of its container. This allows the 
columns to be size proportioned. Notice how the total width of the columns in 
the fixed table is much smaller than the width of the table. This allows the fixed 
table to be size proportioned. 


Sized Columns 


www.cssdesignpatterns .com/size-proportioned-columns 
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Percentage-proportioned Columns 


£j Percentage-proportioned Columns - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Percentage-proportioned Columns 


Sized or Stretched Table 


100 00 300 400 


100 
20% 


80% 


80% 











HTML 


<h1>Percentage-proportioned Columns</h1> 
<h2>Sized or Stretched Table</h2> 
<table class="auto-layout sized"> 
<tr> <td class="p3">50%</td> <td class="p3">50%</td></tr></table> 


<table class="auto-layout sized"> 
<tr> <td class="p1">20%</td> <td class="p1">20%</td></tr></table> 


<table class="auto-layout sized"> 
<tr> <td class="p2">80%</td> <td class="p2">80%</td></tr></table> 


<table class="auto-layout sized"> 
<tr> <td class="p2">80%</td> <td class="p1">20%</td></tr></table> 


<table class="auto-layout sized"> 
<tr> <td class="p2">80%</td> <td class="p1">20%</td> 
«td class="p3">50%</td></tr></table> 


CSS 


.auto-layout { table-layout:auto; } 

.fixed-layout { table-layout:fixed; } 

.sized { width:700px; } 

.stretched ( width:100%; } 

.p1 ( width:20%; } *.p2 { width:80%; } *.p3 { width:50%; } 


* * * * * 


/* Nonessential styles are not shown */ 
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You want to size columns as a percentage of a table's width. In other words, 
you want columns to fill the specified width of a table, and you want to 
distribute a table’s width among its columns using percentages. When the 
total column percentage falls short of 100%, you want a browser to scale the 
percentages to equal 100%. 


ANOAVT NINN109 


You can size columns as a percentage of a table’s width by applying 
width:VALUE OR PERCENT to the table and width: PERCENT to its cells. In other 
words, you size or stretch the table and assign percentages to cells. The table 
can be fixed layout or auto layout. 


When the total percent of all columns is less than 100%, a browser scales 
percents to equal 100%. In the example, the two columns in the second table 
are both assigned to 20%, which totals 40%. These percents are scaled to 
100%, laying out the table as if each column were assigned to 50%. 


A browser works from left to right when sizing percentage-width columns. 
When a browser encounters a percentage that increases the total beyond 
100%, it truncates the percentage assigned to that column so the total equals 
100% and it treats any remaining columns as width: auto. In the example, 

the two columns of the third table are both set to 80%, which totals 160%. 
The percentage assigned to the second table is reduced to 20% so that the 
columns total 100%. In the last table of the example, the third column occurs 
after the percentage totals 100%. This causes a browser to shrinkwrap the 
third column and to scale the previous columns to fit in the remaining space. 


In fixed tables, when percents total 100% or less, percents work the same as 
they work in sized and shrinkwrapped tables. When they exceed 100%, the 
results vary from browser to browser. 


HTML 
<table> <tr> <td> CONTENT </td> </tr> </table> 


CSS 
TABLE SELECTOR { width:VALUE OR PERCENT; } 
CELL SELECTOR { width:PERCENT; } 


This pattern applies to sized, stretched, and fixed tables. 
Percentages are an intuitive, self-documenting way to proportion columns. 


Size-proportioned columns are more forgiving because they do not have to 
add up to 100%. 


Itis best notto allow column percentages to exceed 10096 for any type of 
table. If you want some cells to be shrinkwrapped and others to be percentage 
proportioned, your intention is clearer and the result more reliable when you 
assign width:auto to shrinkwrapped cells and width:PERCENT to percentage- 
proportioned cells. 


Size-proportioned Columns 


Www. Ccssdesignpatterns.com/percentage-proportioned-columns 
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Inverse-proportioned Columns 


Ei 
» Inverse-proportioned Columns - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Inverse-proportioned Columns 


Shrinkwrapped Table 


100 od 
2096 


100 oq 


100 0 





HTML 


<h2>Shrinkwrapped Table</h2> 
<table class="auto-layout shrinkwrapped"> 
<tr> «td class="p1">20%</td></tr></table> 


<table class="auto-layout shrinkwrapped"> 
<tr> «td class="p1">20%</td> 
<td class="p1">20%</td> 
<td class="p1">20%</td> 
<td class="p1">20%</td> 
«td class="p1">20%</td></tr></table> 


«table class-"auto-layout shrinkwrapped"» 
«tr» «td class="p1">20%</td> 
«td class="p2">50%</td></tr></table> 


CSS 


*.auto-layout ( table-layout:auto; ] 
*.shrinkwrapped ( width:auto; } 


*.p1 ( width:20%; } 
*.p2 ( width:50%; } 


/* Nonessential styles are not shown */ 
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You want to size a table in proportion to its column with the widest content, 
and you want its columns to be percentage proportioned within this width. For 
example, you want a table to be automatically sized at twice the width of the 
column containing the widest content. 


You can size a table in proportion to the column with the widest content by 
assigning table-layout:auto and width:auto to the table and width:PERCENT to 
its cells. In other words, you shrinkwrap the table and assign percentages to cells. 


ANOAVT NINN109 


A browser calculates the table width by multiplying the maximum content width 
by the inverse of the percentage assigned to each column. The largest resulting 
width becomes the width of the table. Once the table width is calculated, a 
browser percentage-proportions each column to fit into the table’s width. 


This design pattern provided by browsers is too unintuitive to be useful as it 
stands. But it can be used to create equal-sized columns based on the content 
width, which is the basis of the next design pattern, Equal Content-sized 
Columns. And this is a very useful design pattern. 


HTML 
<table> <tr> <td> CONTENT </td> </tr> </table> 


css 
TABLE SELECTOR { width:auto; table-layout:auto; } 
CELL SELECTOR ( width:PERCENT; } 


This pattern applies to shrinkwrapped tables. 


This pattern works only when the total of all columns is less than or equal 
to 10096. 


In the example, the first table has one column assigned to width:20X. A browser 
multiplies the content's width, which is 40 pixels, by the inverse of 20%, which 
is 5. This sizes the table at 200 pixels plus cell spacing, padding, and borders 
around each cell. The second table shows that the table width is wide enough to 
hold five equal-sized columns shrinkwrapped to their content. The third table 
shows that columns with different percentages are percentage proportioned 
within the calculated width of the table. 


Also notice in the example how smaller percentages and wider content make 
wider tables. For example, given a content width of 40 pixels, the first column of 
the third table with a width of 20% suggests a table width of 200 pixels (5X40). 
The second column with a width of 5096 suggests a table width of 80 pixels 
(2X40). The first column wins because it suggests a larger table width. If the 
content width of the second column were wider, say 150 pixels, it would win 
and size the table at 300 pixels (2X150). 


Equal Content-sized Columns 


WwWwW.Cssdesignpatterns.com/inverse-proportioned-columns 
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Equal Content-sized Columns 


a) Equal Content-sized Columns - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Equal Content-sized Columns 


Shrinkwrapped Table 


4=25%|25% |25% |25% 





HTML 


<h1>Equal Content-sized Columns</h1> 


<h2>Shrinkwrapped Table</h2> 
<table class="auto-layout shrinkwrapped"> 
<tr> <td class="p2">2=50%</td> <td class="p2">50%</td></tr></table> 


<!-- Additional tables are not shown --> 


CSS 


*.auto-layout ( table-layout:auto; } 
*.shrinkwrapped { width:auto; } 


*.p2 { width:50%; ) /* 2 columns */ 
*.p3 ( width:33.5%; } /* 3 columns */ 
*.p4 ( width:25%; )  /* 4 columns */ 
*.p5 ( width:20%; ) /* 5 columns */ 
*.p6 ( width:16.5%; } /* 6 columns */ 
*.p7 ( width:14.1%; ) /* 7 columns */ 
*.p8 ( width:12.3%; ) /* 8 columns */ 
*.p9 ( width:11%; )  /* 9 columns */ 
* 


.p10 ( width:10%; } /* 10 columns */ 


/* Nonessential styles are not shown */ 


Equal Content-sized Columns 
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You want to create a compact table with uniformly sized columns. In other 
words, you want to automatically shrink a table to its smallest possible width 
while sizing all columns equally. 


You can use a variation of the Inverse-proportioned Columns design pattern 
to set all columns to the same width while ensuring the width is no larger 
than necessary to display the table's content. 


100AV 1NIA(TIOS 


You can do this by assigning table-layout:auto and width:auto to the table 
and width:PERCENT to its cells. In other words, you shrinkwrap the table and 
assign percentages to cells. The key is to apply the same percentage to all cells 
and to use a percentage that is the inverse of the number of columns in the 
table. 


- Atwo-column table requires each column to be sized at 50%. 

- Athree-column table requires each column to be sized at 33.596. 
- A four-column table requires each column to be sized at 25%. 

- A five-column table requires each column to be sized at 20%. 

- Asix-column table requires each column to be sized at 16.5%. 

- Aseven-column table requires each column to be sized at 14.196. 
- An eight-column table requires each column to be sized at 12.3%. 
- Anine-column table requires each column to be sized at 1196. 

- Aten-column table requires each column to be sized at 10%. 


Note that some percentages are not exact inverses of the number of columns 
because the inexact value works better in some browsers. 


HTML 
«table» «tr» «td» CONTENT «/td» «/tr» «/table» 


CSS 
TABLE SELECTOR ( width:auto; table-layout:auto; ] 
CELL SELECTOR ( width:PERCENT; } 


This pattern applies to shrinkwrapped tables. 


You can automatically shrinkwrap a table and its columns, and at the same 
time have all columns be equal width. This scales nicely on all devices, and 
when a small display shrinks a table's container to the width of the table or 
smaller, a browser automatically switches the table to the Equal-sized 
Columns design pattern. 


This design pattern only works best when you have columns containing 
numbers and short text. When content is wide enough to stretch a table to the 
width of its container, a browser automatically switches to the Equal-sized 
Columns design pattern. 


Inverse-proportioned Columns, Equal-sized Columns 


WWw.Ccssdesignpatterns.com/equal-content-sized-columns 
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Equal-sized Columns 


3 Equal-sized Columns - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Equal-sized Columns 


Sized, Stretched, or Fixed Table 


2=50% 50% 


3=33% 33% 
4=25% 





HTML 


<h2>Sized, Stretched, or Fixed Table</h2> 
<table class="auto-layout sized"> 
<tr> <td class="p2">2=50%</td> <td class="p2">50%</td></tr></table> 


<!-- Additional tables are not shown --> 


CSS 


*.auto-layout ( table-layout:auto; } *.fixed-layout { table-layout:fixed; } 
*.sized ( width:700px; } *.stretched { width:100%; } 


*.p2 ( width:50%; }  /* 2 columns */ 
*.p3 ( width:33.5%; } /* 3 columns */ 
*.p4 ( width:25%; }  /* 4 columns */ 
*.p5 ( width:20%; }  /* 5 columns */ 
*.p6 { width:16.5%; } /* 6 columns */ 
*.p7 ( width:14.1%; } /* 7 columns */ 
*.p8 { width:12.3%; } /* 8 columns */ 
*.p9 ( width:11%; )  /* 9 columns */ 
* 


.p10 ( width:10%; ) /* 10 columns */ 


/* Nonessential styles are not shown */ 


Equal-sized Columns 
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You want to automatically divide a table's width into equal proportions for 
each cell. In other words, you want to size all columns equally as a percentage 
of a table's width. 


You can size columns equally as a percentage of a table's width by applying 
width:VALUE OR PERCENT to the table and width: PERCENT to its cells. In other 
words, you size or stretch the table and assign percentages to cells. The table 
can be fixed layout or auto layout. The key is to apply the same percentage to 
all cells. 


100AV 1NIA(TIOS 


The same percentages that work for the Equal Content-sized Columns design 
pattern work for this design pattern: 


- Atwo-column table requires each column to be sized at 50%. 

- A three-column table requires each column to be sized at 33.5%. 

- A four-column table requires each column to be sized at 25%. 

- A five-column table requires each column to be sized at 20%. 

- Asix-column table requires each column to be sized at 16.5%. 

- Aseven-column table requires each column to be sized at 14.196. 
- An eight-column table requires each column to be sized at 12.3%. 
- Anine-column table requires each column to be sized at 11%. 

- Aten-column table requires each column to be sized at 1096. 


Note that some percentages are not exact inverses of the number of columns 
because the inexact value works better in some browsers. It does not matter 
if the total percentage exceeds 100?6, because a browser compensates by 
proportionately shrinking the width of all columns to fit into its width. 


The difference between this design pattern and the Equal Content-sized 
Columns design pattern is that this pattern divides columns equally into the 
table's width, and the Equal Content-sized Columns pattern shrinkwraps 
columns to create the narrowest possible table with equal-width columns. 


HTML 
«table» «tr» «td» CONTENT «/td» «/tr» «/table» 


CSS 
TABLE SELECTOR { width:VALUE OR PERCENT; } 
CELL SELECTOR ( width:PERCENT; } 


This pattern applies to sized, stretched, and fixed tables. 


Equal-sized columns are most common in stretched and sized tables where 
you want multiple tables to have a uniform width and you want their 
columns to have a uniform width. 


Sized tables do not adapt to small displays, such as mobile devices. 


Fixed tables automatically create equal-sized columns by default because 
assigning width:auto to cells triggers this unique behavior of fixed tables. 


Equal Content-sized Columns, Percentage-proportioned Columns 


www. cssdesignpatterns.com/equal-sized-columns 
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Undersized Columns 


© Undersized Columns - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Undersized Columns 


Fixed Table 


100 
auto 


Sized Table — cannot be undersized 


100 200 300 400 500 600 
18px|auto 


HTML 





<h1>Undersized Columns</h1> 


<h2>Fixed Table</h2> 
<table class="fixed-layout sized"> 
<tr> <td class="undersized">18px</td> <td class="flex">auto</td></tr></table> 


«h2»Sized Table - cannot be undersized</h2> 


«table class-"auto-layout sized"» 
«tr» «td class-"undersized"»18px«/td» «td class="flex">auto</td></tr></table> 


CSS 
td ( overflow:hidden; ) 


*.fixed-layout ( table-layout:fixed; } 
*.auto-layout ( table-layout:auto; ] 


*.sized { width:700px; } 
* stretched { width:100%; } 


*.undersized ( width:18px; } 
* flex ( width:auto; } 


/* Nonessential styles are not shown */ 
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You want to create columns that will be the exact width assigned to them. 
They may even be undersized, which means a column may be narrower than 
its content, and its content may be truncated. 


You can fix the size of columns by applying table-layout:fixed and 
width:VALUE OR PERCENT to the table and width:VALUE OR PERCENT to its cells. 
In other words, you can size or stretch a fixed table, and assign fixed widths 
to cells. 


100AV 1NIA(TIOS 


A fixed-layout table truncates content in a cell if the content cannot fit within 
the columns assigned width. Contrast this with auto-layout tables, where a 
browser always increases the width of a cell to fit its minimum content width. 
To ensure consistent behavior in browsers, you can assign overflow:hidden to 
all table cells. overflow:hidden is the only overflow setting that is consistently 
applied by major browsers to tables. 


HTML 
«table» «tr» «td» CONTENT «/td» «/tr» «/table» 


CSS 
TABLE SELECTOR { width:VALUE OR PERCENT; table-layout:fixed; } 
CELL SELECTOR { width:VALUE OR PERCENT; overflow:hidden; } 


This pattern applies only to fixed tables. 


This design pattern works best when you need to ensure pixel-perfect 
precision that cannot be broken by content. For example, you need to align 
tabular data with a background image. 


Fixed tables render much faster than auto-layout tables because a browser 
only reads the widths assigned to the first row of cells, and it completely 
ignores the width of content. This means a browser does not have to wait for 
the entire table to download, and it does not have to calculate minimum and 
maximum content widths. 


Fixed tables do not adapt to small displays, such as mobile devices. 


The example contains two tables. The first is a fixed table showing how it can 
create undersized columns. The second is an auto-layout table showing how 
it cannot create undersized columns. 


Column Width 


www. cssdesignpatterns.com/undersized-columns 
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Flex Columns 


Flex Columns - Mozilla Firefox 


File Edit View Go Bookmarks Tools Help 


Flex Columns 
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Sized or Stretched — Oversized 
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Fixed — Oversized 
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HTML 


<h1>Flex Columns</h1> 
<h2>Sized, Stretched, or Fixed Table</h2> 
«table class="fixed-layout sized"><tr><td class="sized1">200px</td> 
«td class="p1">20%</td> «td class-"sized2"»100px«/td» 
«td class="flex">auto flex«/td» «td class="flex">auto flex«/td»«/tr»«/table» 


«h2»Sized or Stretched — Oversized«/h2» 
«table class="auto-layout sized"»«tr»«td class="sized1">200px</td> 
«td class="p1">20%</td> «td class="sized3">500px</td> 
«td class="flex">auto flex«/td» «td class="flex">auto flex</td></tr></table> 


«h2»Fixed — Oversized«/h2» 
«table class="fixed-layout sized"»«tr»«td class-"sized1"»200px«/td» 
«td class="p1">20%</td> «td class="sized3">500px</td> 
«td class="flex">auto flex«/td» <td class="flex">auto flex</td></tr></table> 


CSS 


*.fixed-layout ( table-layout: fixed; } 
*.auto-layout ( table-layout:auto; } 
*.sized { width:700px; } 

* stretched { width:100%; } 

*.flex { width:auto; } 

*.sizedi { width:200px; ] 

*.sized2 { width:100px; } 

*.sized3 { width:500px; } 

*.p1 ( width:20%; } 


/* Nonessential styles are not shown */ 
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You want to create dynamically sized columns alongside fixed-width or 
percentage-width columns. You want these columns to fill in space that is not 
used by sized or percentage cells. As a table's container grows or shrinks, you 
want flex columns to grow or shrink (i.e., to flex with the table). 


You can flex the size of one or more columns by applying 
width:VALUE OR PERCENT to the table and width:auto to its cells. In other words, 
you can size or stretch a table, assign fixed widths and percentage width to most 
cells, and apply auto width to those cells you want to flex. 


ANOAVT NINN109 


When there are multiple flex columns in fixed tables, each one is sized equally. 
In auto-layout tables, flex columns are content proportioned. 


Flex columns stretch to fill any space left over after fixed-width and percentage- 
width columns are calculated. If there is no remaining width, flex columns 
collapse or shrinkwrap. In auto-layout tables, flex columns shrinkwrap to their 
minimum content width. In fixed tables, flex columns completely disappear! 


HTML 
<table> <tr> <td> CONTENT </td> </tr> </table> 


CSS 

TABLE SELECTOR ( width:VALUE OR PERCENT; } 
FLEX CELL SELECTOR { width:auto; } 
FIXED CELL SELECTOR ( width:VALUE; } 
PERCENTAGE CELL SELECTOR { width:PERCENT; j 


This pattern applies to stretched and fixed tables. It does not apply to 
shrinkwrapped tables because their auto-width columns shrinkwrap rather 
than flex. It applies to sized tables, but this serves no purpose since a sized 
table does not flex. 


The first table in the example is 700 pixels wide and has two flex columns, two 
fixed-width columns, and one percentage-width column. The fixed-width 
columns take up 300 pixels, and the percentage-width column takes up 

140 pixels. This leaves 260 pixels for the flex columns. Since this is a fixed table, 
both flex columns are sized equally to fit in the remaining 260 pixels. 


The second table shows how flex columns shrink to their minimum content 
width in auto-layout tables when the total width of nonflex columns (840 pixels 
in the example) are larger than or equal to the table's width. 


The third table shows how flex columns disappear in fixed tables when the total 
width of nonflex columns (700 pixels in the example) are larger than or equal to 
the table's width. 


Mixed Column Layouts 


www.cssdesignpatterns.com/flex-columns 
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Mixed Column Layouts 


J) Mixed Column Layouts - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Mixed Column Layouts 
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Fixed Table 
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HTML 





<h1>Mixed Column Layouts</h1> 


<h2>Shrinkwrapped, Stretched, or Sized Tables</h2> 
«table class="auto-layout stretched"> «tr» <td class="sized1">500px</td> 
«td class="p1">10%</td> «td class-"flex"»auto«/td»«/tr»«/table» 


«table class="auto-layout stretched"> «tr» <td class-"sized1"»500px«/td» 
«td class-"sized2"»200px«/td» «td class="p3">40%</td> 
«td class="p1">10%</td> «td class="flex">auto</td></tr></table> 


«table class="auto-layout stretched"> «tr» <td class-"sized1"»500px«/td» 
«td class-"sized2"»200px«/td» «td class="p4">80%</td> 
«td class="p2">20%</td> «td class-"flex"»auto«/td»«/tr»«/table» 





«h2»Fixed Table«/h2» 

«table class="fixed-layout stretched"> «tr» <td class-"sized1"»500px«/td» 
«td class="sized2">200px</td> «td class="p4">80%</td> 
«td class="p2">20%</td> «td class-"flex"»auto«/td»«/tr»«/table» 


CSS 


.fixed-layout ( table-layout:fixed; } *.auto-layout { table-layout:auto; } 
.shrinkwrapped ( width:auto; ) 

.stretched ( width:100%; } 

.flex ( width:auto; } 

.sizedi { width:500px; } *.sized2 { width:200px; } 

.p1 ( width:10%; } *.p2 ( width:20%; } 

.p3 ( width:40%; } *.p4 { width:80%; } 


* * * * X * X* 


/* Nonessential styles are not shown */ 
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You want to use a mixture of columns in a table. For example, you want some 
columns to have a fixed width, some to be a percentage of the table's width, and 
some to fill in the remaining space. 


This design pattern is the algorithm built into each browser that prioritizes how 
much width to give different types of columns when the table is not wide enough 
for all its columns to fit. 


100AV 1NIA(TIOS 


In a shrinkwrapped, sized, or stretched table, percentage-width columns have 
highest priority followed by fixed-width and auto-width columns. In other words, 
auto-width columns are shrunk to the minimum width of their content to make 
room for other columns. If there is still not enough room, fixed-width columns 
are shrunk to the minimum width of their content. Percentage-width columns 
are percentage proportioned in the remaining space. If there is space left over for 
fixed-width columns, they are size proportioned to fill the remaining space. 


In a fixed table, fixed-width columns have highest priority followed by 
percentage-width and auto-width columns. In other words, auto-width columns 
are collapsed as needed to make room for other columns—they completely 
disappear. If there is still not enough room for all the columns, percentage-width 
columns are collapsed to make room—they completely disappear. Fixed-width 
cells are displayed at their assigned width—even if it increases the width of the 
table beyond its specified width. If there is space left over for percentage-width 
columns, they are percentage proportioned to fill the remaining space. 


This pattern applies to shrinkwrapped, stretched, and fixed tables that are 
stretched. This is because a browser resizes them automatically to fit their 
content and to fit large or small displays. In this situation, you may want some 
columns to be a fixed width, some to be a percentage of the table's width, some 
to shrinkwrap, or some to flex to fill in the remaining width. 


There is no need to mix columns in sized tables, because you already know their 
width, and you can simply use fixed-width columns. 


The first table in the example is a stretched table with mixed columns that do 
not exceed the width of the table. Notice how the auto-width column flexes to 
take up the extra space. The remaining tables have columns with a combined 
width that exceeds the width of the table. Notice in the second table how the 
percentage-width columns are fully sized to their assigned percentages, the 
auto-width column is forced down to the minimum width of its content, and the 
fixed-width columns are size proportioned to fit the remaining space. The third 
table shows how large percentage-width columns can force fixed-width and 
auto-width columns to shrink to their minimum content width. The fourth table 
is identical to the third table, except it is fixed. Notice how the fixed-width 
columns in this fixed table have completely removed the percentage-width 

and auto-width columns! 


Flex Columns 


WWw.Ccssdesignpatterns.com/mixed-column-layouts 


CHAPTER 17 


Layouts 


This chapter shows how to create fluid layouts, which automatically adapt to different 
devices, fonts, widths, and zoom factors. These design patterns are accessible, modular, and 
easily customized. The dynamic patterns use open source JavaScript libraries to attach event 
handlers to elements. This allows you to create dynamic effects without putting a single line of 
JavaScript in your document! The libraries use CSS selectors to determine which elements to 
process in response to events, and they can modify the class attribute of elements so your 
stylesheet has complete control over how events dynamically style an element. 


Chapter Outline 


* Fluid Layout Overview explores problems and solutions in creating fluid layouts. 

* Outside-in Box shows how to size the outer width of a box instead of the inner width. 
* Floating Section shows how to render sections in columns using a fluid layout. 

* Float Divider shows how to separate and integrate floats and content predictably. 

* Fluid Layout shows how to create layouts that automatically adapt to any display. 

* Opposing Floats shows how to move content to opposite sides of its container. 


* Event Styling shows how to assign events to elements without putting code in your 
document. It shows how events can modify classes to change how elements are styled. 


* Rollup shows how to collapse and open sections with a mouse click. 
* Tab Menu shows how to create a tabbed interface that loads new pages when clicked. 


* Tabs shows how to create a tabbed interface that dynamically switches content in and 
out of the display when the user clicks a tab—without loading a new page. 


* Flyout Menu shows how to create a menu that opens when clicked or hovered over. 
* Button shows how to create buttons and process their events using JavaScript. 
e Layout Links shows how to use links as part of the layout, such as breadcrumbs. 


* Layout Example shows how these design patterns can be combined and extended. 
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CHAPTER 17 ™ LAYOUTS 


Fluid Layout Overview 


Fluid Layout Overview - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Fluid Layout Overview 





Navigation Main 


20% of container's | 40% of container's width. 
width. 


HTML 


<body> 
<hi>Fluid Layout Overview</h1> 
<div id="nav"> 
<h2>Navigation</h2> 
<p>20% of container's width.</p></div> 
<div id="main"> 
<h2>Main</h2> 
<p>40% of container's width.</p></div> 
<div id="news"> 
<h2>News</h2> 


<p>20% of container's width.</p></div> 


</body> 


CSS 


News 


20% of container's 
width. 





body { max-width:1000px; margin-left:auto; margin-right:auto; } 


div ( background-color:gold; margin-right:10px; padding: 5px; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:1px solid gray; border-bottom:2px solid black; } 


#nav ( float:left; width:20%; min-width:170px; } 
#main { float:left; width:40%; min-width:170px; } 
#news ( float:left; width:20%; min-width:170px; } 


/* Nonessential rules are not shown. */ 


CHAPTER 17 ™ LAYOUTS 


Fluid Layout Overview 


Problems 


Solutions 


Example 


Related to 
See also 


You want to create fluid layouts that automatically adapt to different devices, 
fonts, widths, and zoom factors. 


You want to lay out content in columns and rows that dynamically expand and 
contract to fit the width of the viewport. You want to use columns even for 
nontabular data, but you cannot use tables for nontabular content because this 
is less accessible. (Content is tabular only when the content of each cell is related 
to all cells in its row and all cells in its column.) 


You want columns automatically to reflow into rows when the width of the 
viewport is narrow, such as on a handheld device. You cannot use tables because 
they cannot render columns as rows. 


You want the width of columns to expand automatically to take advantage of a 
wide viewport, but only to a certain point because extremely wide columns are 
not very readable. 


You want the width of columns to shrink automatically when the width of the 
viewport is narrow, but not so much that content becomes unreadable. 


You want to lay out columns proportionally so that some columns have a greater 
percentage of their parent's width and some have less. 


You want some columns to be aligned to the left side and others to the right—see 
the Opposing Floats design pattern. 


Each of these problems is solved by the design patterns in this chapter. The 
Fluid Layout design pattern shows how to lay out content in rows and columns 
without using tables. In turn, it relies on the Outside-in Box, Float Divider, and 
Floating Section design patterns. 


The example shows only the minimum markup and styles needed to create fluid 
layouts. As the chapter progresses, additional markup and styles will be added to 
implement additional capabilities and better reliability when combined with 
other markup. 


The example illustrates several key capabilities of the Fluid Layout design 
pattern. A maximum width is assigned to the body element so that the width 
does not get too wide to be usable. (For fun, I have also centered the body in 

the viewport.) In addition, I floated the divisions to the left to display them as 
columns, but when the viewport is too narrow for all of them to be displayed side 
by side, a browser automatically wraps one or more of them to the next row. In 
addition, I assigned a minimum width to each division so that it won't shrink too 
small to be readable. Lastly, I assigned a percentage to the width of each division 
so that it will scale proportionately to the width of the viewport. 


You may want to resize the example in a browser to see how it responds to 
different widths. 


Outside-in Box, Floating Section, Float Divider, Fluid Layout 


WwWw.cssdesignpatterns.com/fluid-layout-overview 
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Outside-in Box 


E 7) Outside-in Box - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Outside-in Box 


Before 


After 








HTML 


<h1>Outside-in Box</h1> 


<h2>Before</h2> 

<div class="container"><div class="before float"> Float </div></div> 

<div class="container"><span class="before absolute"> Absolute </span></div> 
<div class="container"><div class="before static"> Static </div></div> 





<div class="float-divider"></div><h2>After</h2> 


<div class="container"> 
<div class="after float"><div class-"oi"» Float </div></div></div> 


<div class="container"> 
<span class="after absolute"»«span class-"oi"» Absolute </span></span></div> 


<div class="container"> 
<div class="after static"»«div class-"oi"» Static </div></div></div> 


CSS 
*.before ( width:100%; margin:5px; padding:5px; border:5px solid black; } 


*.after ( width:100%; ) 
*.after *.oi ( margin:5px; padding:5px; border:5px solid black; display:block; } 


*.float ( float:left; ) 
*.absolute ( position:absolute; } 


*.static { position:static; } 


/* Nonessential rules are not shown. */ 
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Outside-in Box 


Alias 


Problem 


Solution 


Application 


Pattern 


Location 


Limitations 


Related to 


See also 


Outer Width 


You want to set the outer width of a float, an absolute, or a static element to a 
specific measurement or percentage. You do not want margins, borders, and 
padding to increase the outer width. This is a problem because CSS does not 
provide an outer-width property. The width property is the inner width of an 
element, and margins, borders, and padding expand the outer width. 


Instead of assigning margins, borders, and padding to an element, you can 
assign them to an embedded element. Because the outer element does not have 
margins, borders, and padding, its outer width is its inner width. This lets you set 
its outer width using width. 


Icall the embedded element the outside-in box because it moves the margins, 
borders, and padding from the outside of the box to the inside. In the example, 
I identify outside-in boxes using a class named oi. 


The outside-in box must be stretched to fill the width and height of its parent so 
its margins, borders, and padding will be indented inside its container. (You 
could also use negative margins to outdent the outside-in box.) A block element 
or an inline element displayed as a block make great outside-in boxes because a 
browser automatically stretches them. 


When creating layouts, you often need to set the outer width of child elements 

to a percentage of the width of their parent. For example, you may want each of 
two floats in a container to be set to 50% of the container's width. If you apply 
margins, borders, or padding directly to these floats, their outer width expands to 
more than 5096. This causes the second float to move below the first float instead 
of beside it. You can solve this problem by applying margins, borders, and 
padding to embedded outside-in boxes. 





This pattern is essential when using percentages to lay out elements in fluid 
layouts because it is impossible to anticipate in advance what percentage 
assigned to width will compensate for fixed margins, borders, and padding. 


HTML 

«BLOCK»«div class-"oi"» CONTENT </div></BLOCK> 

or 

<INLINE><span class-"oi"» CONTENT </span></INLINE> 
CSS 


SELECTOR ( width:PERCENT; min-width:+VALUE; ) 

SELECTOR *.oi ( margin:+VALUE; border:WIDTH STYLE COLOR; 
padding:+VALUE; background:STYLES; display:block; } 

This pattern works anywhere. 


This pattern does not apply to tables. It also does not apply to outer height 
because a static block box’s height shrinkwraps instead of stretches. 


Fluid Layout; Display, Box Model, Block Box (Chapter 4); Width, Stretched 
(Chapter 5); Margin, Border, Padding, Background (Chapter 6); Blocked 
(Chapter 11) 


www. cssdesignpatterns .com/outside- in-box 


(Continued) 


376 CHAPTER 17 ™ LAYOUTS 


Outside-in Box (Continued) 


© Outside-in vs. Inside-out Design - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Outside-in vs. Inside-out Design 


Two floats with 50% width and no margins, borders, or padding 
Floati Float2 


Two floats with 50% width and 1px border 
Floati 
Float2 





Two floats with 45% width and 5% left margin 
Floati Float2 


Two floats with 49.596 width and 5px left margin 
Floati 
Float2 





HTML 


«hi»Outside-in vs. Inside-out Design«/hi» 


<h2>Two floats with 50% width and no margins, borders, or padding</h2> 


«div class="exi"> Floati </div> «div class="ex1"> Float2 </div><hr /» 


«h2»Two floats with 50% width and 1px border</h2> 


«div class="ex2"> Floati </div> «div class="ex2"> Float2 </div><hr /» 


<h2>Two floats with 45% width and 5% left margin</h2> 


«div class="ex3"> Floati </div> «div class="ex3"> Float2 </div><hr /» 


<h2>Two floats with 49.5% width and 5px left margin</h2> 


«div class="ex4"> Floati </div> «div class="ex4"> Float2 </div> 








CSS 


body { max-width:1200px; } 
div { min-width:100px; } 


.ex1 ( float:left; width:50%; } 

.ex2 ( float:left; width:50%; border:1px solid; } 
.ex3 ( float:left; width:45%; margin-left:5%; } 
.ex4 { float:left; width:49.5%; margin-left:5px; } 


* * * X* 


/* Nonessential rules are not shown. */ 
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Outside-in Box (Continued) 


OUTSIDE-IN VS. INSIDE-OUT DESIGN 


Fluid layouts are designed from the outside to the inside. This is because you start with the width of the viewport and 
divide up its width among elements using percentages, minimum widths, and maximum widths. 

The problem is that the width property sets the inner width of an element. Padding, borders, and margins surround 
the inner width of an element, and thus increase its outer width. Because CSS does not have an outer-width property, CSS 
requires you to design from the inside to the outside. The result is that margins, borders, and padding can break fluid lay- 
out designs. 

For example, you may want to float two elements to the left and assign each to width: 507 so they will be posi- 
tioned side by side and evenly divide the width of the viewport. The first two divisions in the example show how this works. 
No matter how you resize the viewport, these elements stay positioned side by side (until their minimum width no longer 
allows them to fit within the width of the viewport). 

If you assign any margins, borders, and padding to these two side-by-side floats, the floats will no longer fit within 
the width of the viewport. For example, if you assign a 1-pixel border around each of them, their total outer width exceeds 
the width of the viewport by 4 pixels (1 pixel for the left and right sides of each element). When floats do not fit side by side 
within their container, they wrap to the next line. This is not what you want! The second set of divisions in the example 
shows how a tiny 1-pixel border can break the fluid layout. No matter how you resize the viewport, the floats will not fit 
Side by side. 

To fit two elements with margins, borders, and padding within their container, you have to reduce the percentage 
width of each element, but by how much? If you assign percentages to margins and padding, you can simply subtract each 
of their percentages from the percentage you assign to the width. For example, if you assign a 5% left margin to each of 
two elements, you can assign a width of 45% to each element. This is demonstrated by the third set of divisions in the 
example. No matter how you resize the viewport, these elements stay positioned side by side (until their minimum width 
prevents them from fitting in the viewport). 

Per the CSS specification, browsers ignore percentages assigned to borders, which means you must use a fixed 
measurement to create borders. It is also unusual to assign percentages to margins and padding because margins and 
padding typically look better when they do not resize with the viewport. You can resize the example to contrast the behav- 
ior of percentage margins and fixed margins. 

In fluid layouts, assigning fixed margins, borders, and padding to an element is not compatible with a percentage 
assigned to its width. As the viewport shrinks, percentages shrink the width of an element, but its fixed margins, borders, 
and padding do not shrink. For example, given a viewport width of 1000 pixels containing two side-by-side child elements 
where each has 5-pixel left margins, the available width is 990 pixels, or 99%—that is, (1000px — 5px — 5px) / 1000px. If 
you were to divide this equally among the two elements, you would assign width: 49.5% to each. Given a viewport width 
of 100 pixels, the available width is 90 pixels, or 90%—that is, (100px — 5px — 5px) / 100px. To divide that equally among 
the two elements, you would assign width: 45% to each. Thus, mixing fixed margins, borders, and padding with percent- 
age widths does not work in fluid layouts. In the example, the fourth set of divisions is set to 49.5%, with left margins set 
to 5 pixels. The screenshot is taken at 750 pixels wide, which is not wide enough for them to fit side by side, but if you 
enlarge the browser window to 1000 pixels or more, they will fit. 

Note that Internet Explorer 7 and earlier versions do not quite play by the rules. When floating two elements set to 
width: 50%, Internet Explorer guesses you want them to be side by side, so it breaks the rules and puts them side by side. 
All other major browsers behave properly. Furthermore, Internet Explorer 6 has bugs that sometimes cause floats notto be 
placed side by side when they should be. For example, in the third set of divisions, Internet Explorer 6 moves the second 
float below the first. Internet Explorer 7 fixes these bugs. 

The Outside-in design pattern solves all these problems (including the ones with Internet Explorer). Thus, it is an 
essential design pattern for creating fluid layouts. The alternative is to hack away at percentages until you find something 
that works in most browsers and looks close to what you want most of the time. 
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Floating Section 


Floating Section - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Floating Section 








Navigation Main Section 


Section ] í 
75% of container's width minus 


25% of 80-pixel left margin, 1-pixel left 
container's width. border, 2-pixel left border, and 
80-pixel left padding. 











HTML 


«hi»Floating Section</h1> 


«div id-"nav" class="section"> 
«div class-"oi"» 
«h2»Navigation Section«/h2» 
<p>25% of container's width.«/p» 
«/div» 
«/div» 


«div id="main" class="section"> 
<div class="0i"> 
«h2»Main Section</h2> 
<p>75% of container's width minus 80-pixel left margin, 1-pixel left border, 
2-pixel left border, and 80-pixel left padding.«/p» 
«/div» 
«/div» 


CSS 


*.oi ( background-color:gold; 
border-left:1px solid gray; border-right:2px solid black; 
border-top:ipx solid gray; border-bottom:2px solid black; ] 


#nav { float:left; width:25%; min-width:170px; } 
#nav *.oi { min-height:150px; margin:0; padding:5px; } 


"main ( float:left; width:75%; min-width:170px; } 
#main *.oi { min-height:150px; margin-left:80px; padding:5px; padding-left:80px; } 


/* Nonessential rules are not shown. */ 
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Floating Section 


Problem 


Solution 


Pattern 


Location 


Limitations 


Example 


Related to 


See also 


You want sections to be rendered in columns instead of rows. You want a browser 
to reflow sections automatically into rows to fit small displays. You also want 
sections to be sized proportionally to the width of their parent while controlling 
spacing between sections. You also want to set minimum and maximum heights 
and widths to ensure a browser does not automatically size sections too small or 
too large. 


You can use the Section design pattern to create a section, and you can float it to 
the left to render it as a column instead of a row. You can assign a unique ID to it 
so you can select it, style it, and target it with hyperlinks. 


You can embed an outside-in box within each float and style its margins, 
borders, padding, and background instead of the float's. This makes it easy 
and reliable to size floats proportional to their container. 


You can assign min-width to a section to prevent it from shrinking too small. You 
can assign max-width to a section to prevent it from growing too wide. You can 
also assign min-height to the outside-in box to ensure floats with less content 
have the same minimum height as those with more content. 


HTML 
«div id-"SECTION ID" class-"section"» 
«div class="0i"> 
«h2» HEADING «/h2» 
«p» CONTENT </p> </div></div> 


CSS 
&SECTION ID ( float:left; width:PERCENT; 
min-width:VALUE; max-width:VALUE; } 





#SECTION ID *.oi { min-height:+VALUE; 
margin:+VALUE; border:WIDTH STYLE COLOR; 
padding:+VALUE; background:STYLES; } 


This pattern works anywhere sections can be used. 


Internet Explorer 6 does not implement min-width and max-width, but Internet 
Explorer 7 does. These properties are not essential to this design. 


In the example, the first float’s width is 25% of its container’s width, and the 
second float is 75%. Notice how the percentages add up to 100%. Without the 
outside-in box, you would have to play around with percentages to find values 
that compensate for margins, borders, and padding around floats. 


Notice how the floats in the example have no margin, border, padding, or 
background. What you see is the border and background of the outside-in box 
inside each float. For example, the outside-in box in the second float has an 
80-pixel left margin, which creates the illusion of space between the floats when 
it is actually inside the second float. It also has an 80-pixel left padding, which 
indents the content without changing the float's outer width. 


Outside-in Box, Fluid Layout; Floated Box (Chapter 4); Width (Chapter 5); 
Margin, Border, Padding, Background (Chapter 6); Float and Clear (Chapter 7); 
Section (Chapter 13) 


www. cssdesignpatterns.com/floating-section 
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Float Divider 


€) Float Divider - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Float Divider 


First Row of Floats 





Float 1| Float 2| Float 3| 


Second Row of Floats 


Float 4| Float 5| Float 6| 








HTML 


<h1>Float Divider</h1> 
<h2>First Row of Floats</h2> 


<div class="float box"><h3>Float 1</h3></div> 
<div class="float box"><h3>Float 2</h3></div> 
<div class="float box"><h3>Float 3</h3></div> 


<div class="float-divider"></div> 


<h2>Second Row of Floats</h2> 

<div class="float box"><h3>Float 4</h3></div> 
<div class="float box"><h3>Float 5</h3></div> 
<div class="float box"><h3>Float 6</h3></div> 


CSS 
* float { float:left; } 


*.float-divider { clear:both; 
height: 20px; 
margin-bottom: 20px; 
border-bottom:5px solid black; 
font-size:1px; line-height:1px; } 


/* Nonessential rules are not shown. */ 
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Float Divider 


Problem 


Solution 


Pattern 


Location 


Advantages 


Tip 


Related to 


See also 


You want to put a divider between two sets of floats or between floats and 
content—much like how you would put a linebreak or a horizontal rule in the 
normal flow. You want to control how much space the divider inserts, and you 
want to style it with borders and background. 


You can add clear:both to the Horizontal Rule design pattern, which is an empty 
division styled with width, height, and margin to control how much space it 
inserts. You can use font-size:1px and line-height:1px to ensure Internet 
Explorer 6 does not expand its height beyond the height you specify. You can 

also use border and/or background to style the divider's line. 


Instead of inserting a float divider, you may want to add a unique ID to an 
existing element and style it with clear:both. 


HTML 
«div class-"float-divider"»«/div» 
CSS 
*.float-divider { clear:both; font-size:1px; line-height:1px; 
height:+VALUE; width:+VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
margin-top:+VALUE; margin-bottom: +VALUE; 


border-top:WIDTH STYLE COLOR; 
border-bottom:WIDTH STYLE COLOR; 
background-color: COLOR; 
background-image:url("FILE.EXT"); 
background-repeat:REPEAT OPTIONS; } 


This pattern works anywhere a division can be located. 





A float divider solves several problems. Firefox 2 and Opera 9 do not honor the 
top margin of cleared elements, which moves cleared elements too close to the 
floats above them. The float divider does not have this problem because it uses 
its height instead of its top margin to create space. 


A float divider is modular and self-documenting. Its borders, background, and 
margins are self-contained, which simplifies the stylesheet and avoids styles 
being overridden by the cascade order. You can quickly and easily reposition a 
float divider between any two elements to change the layout. 


When a block is collapsed because all its children are floated, you can use a float 
divider to expand the block to encompass its floated children. This is an essential 
technique explored in the Fluid Layout design pattern. 


A float divider can be an inline element as long as you display it as a block 
(display:block). 


Fluid Layout; Floated Box (Chapter 4); Margin, Border, Padding, Background 
(Chapter 6); Float and Clear (Chapter 7); Spacing, Inline Spacer, Linebreak, Inline 
Horizontal Rule (Chapter 11); Horizontal Rule, Block Spacer (Chapter 13) 


www. cssdesignpatterns.com/float-divider 


382 





CHAPTER 17 ™ LAYOUTS 


Fluid Layout 


©) Fluid Layout - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Fluid Layout 


main - 100% 








nav - 20% | content - 60% news - 
ES head - 35% | detail - 65% | Ex | 





HTML 


«hi»Fluid Layout</h1> 


«div id="main"><div class="0i1"> «h2»main - 100%</h2> 
<div id="nav"><div class="0i2"> <h3>nav - 20%</h3> </div></div> 


<div id="content"><div class="0i2"> <h3>content - 60%</h3> 
«span id="head"><span class="0i3"> <em>head - 35%</em> </span></span> 
«span id="detail"><span class-"oi3"» «em»detail - 65%</em> </span></span> 
«span class="float-divider"></span></div></div> 


«div id="news"><div class="0i2"> «h3»news - 20%</h3> </div></div> 


<div class="float-divider"></div></div></div> 


CSS 


*.float-divider ( clear:both; display:block; 

height:1px; font-size:ipx; line-height:1px; } 
*.oii ( background-color:white; margin:0; padding:5px; } 
*.oi2 ( background-color:gold; margin:5px; padding:5px; } 
*.oi3 ( background-color:yellow; margin:5px; padding:5px; } 


#main ( max-width:700px; } 

#nav { float:left; width:20%; min-width:75px; } 
#content { float:left; width:60%; min-width:150px; } 
#news { float:left; width:20%; min-width:115px; } 
#nav *.oi2 ( min-height:43px; } 

#content *.0i3 { display:block; } 

#head { float:left; width:35%; min-width:75px; } 
#detail { float:left; width:65%; min-width:75px; } 


/* Nonessential rules are not shown. */ 
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Fluid Layout 


Problem 


Solution 


Pattern 


Location 


Related to 


See also 


You want to lay out sections in rows and columns that dynamically and fluidly 
adapt to the width of the viewport, available fonts, and zoom level. You want 
the layout to grow and shrink with the width of the viewport, but you also 
want to limit how much it can grow and shrink. You want columns to revert 
automatically to rows when the viewport is not wide enough for side-by-side 
display. You want to nest layouts within layouts, and you want to predictably 
intermingle them with content in the normal flow. 


You can nest sections within sections to create multilevel layouts in rows and 
columns. A parent section can be floated or nonfloated! The initial section is the 
«body» element, which by default stretches to the width of the viewport. You can 
set the widths of all other sections to width:PERCENT or width:auto to scale the 
entire layout to the width of the viewport. 


You can lay out sections in columns by floating them left. Their parent becomes 
a row, and you can divide the row's width among its columns by assigning a 
percentage to each column's width. Column widths in a row normally total 100%. 
When a row grows or shrinks, so does its columns. 


You can embed an outside-in box within each section so you can size it without 
interference from margins, borders, and padding. To reliably select outside-in 
boxes at different levels of nested floats, you can assign a class to them that is 
unique to each level. In the example, I use three classes, oi1, oi2, and oi3, to 
identify outside-in boxes at specific nesting levels. This lets me select level 2 
boxes without also selecting descendant level 3 boxes. 


You can ensure a section always expands vertically to encompass all its content 
by inserting a float divider after the last float in the section. A float divider also 
starts the following section in a new row. 


HTML 
«div id-"SECTION ID"» 
«div class-"oilLEVEL"» 
NESTED SECTIONS AND OR SECTION CONTENT 
«div class-"float-divider"»«/div»«/div»«/div» 


CSS 
#SECTION_ID ( float:left; width:PERCENT; 
max-width:VALUE; min-width:VALUE; } 





#SECTION_ID *.oiLEVEL { min-height:+VALUE; margin:+VALUE; 
border:WIDTH STYLE COLOR; 
padding:+VALUE; background: STYLES; 
display:block; } 


*.float-divider { clear:both; display:block; 
height:1px; font-size:1px; line-height:1px; } 
This pattern works anywhere. 


Outside-in Box, Floating Section, Float Divider; Floated Box (Chapter 4); Margin, 
Border, Padding, Background (Chapter 6); Float and Clear (Chapter 7); Offset 
Float (Chapter 8); Blocked (Chapter 11) 


www. cssdesignpatterns.com/fluid-layout 
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Opposing Floats 


3) Opposing Floats - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 





Search: 


Opposing Floats 


This right float shrinks no smaller than its minimum 
width and grows no larger than its maximum width. 


Home » Floating Layout Postheader message 1 
Home » Floating Layout Postheader message 2 





HTML 


<div id="header"> 
«hi id="title">Opposing Floats</h1> 
<div id="search"> <h3>Search:</h3> 
<form method="post" action-"http://www.tipjar.com/cgi-bin/test"» 
<input type="text" value-"" name-"searchtext" id-"searchtext" size-"32" /> 
<input type="submit" value-"Search" name-"find" id="find" /»«/form» 
«p class-"message"»This right float shrinks no smaller than its minimum width 
and grows no larger than its maximum width.«/p» 
</div> 
<div class="float-divider"></div> 
</div> 


«div id-"postheader"» 
«p class="breadcrumbs"><a href="#">Home</a> » Floating Layout</p> 
«p class="post-msg">Postheader message 1</p> 
«div class="float-divider"></div> 


«p class-"breadcrumbs"»«a href="#">Home</a> » Floating Layout«/p» 
«p class="post-msg">Postheader message 2</p> 
«div class="float-divider"></div> 

«/div» 


CSS 


*.float-divider ( clear:both; display:block; 
height:1px; font-size:1px; line-height:1px; } 


* breadcrumbs { float:left; max-width:350px; margin-left:10px; } 
*.post-msg { float:right; max-width:350px; margin-right:10px; } 


#title { float:left; min-width:280px; max-width:350px; margin-left:0; } 
#search { float:right; min-width:280px; max-width:350px; margin-right:0; } 


/* Nonessential rules are not shown. */ 
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Opposing Floats 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 


Related to 


See also 


You want two elements to be positioned at opposite sides of a container. You 
want a browser to shrinkwrap each one to fit its content. You want to put 
minimum and maximum limits on the width of each one. 


You can assign float:left to one sibling element and float:right to the next. 
This moves both elements to opposite sides of their parent. It does not matter 
which element comes first in document order. This pattern applies only to pairs 
of adjacent sibling elements. 


The parent of the opposing floats can be floated or nonfloated. You can follow 
the floats with a float divider to ensure no subsequent content comes in between 
the floats and to ensure the parent expands vertically to encompass the opposing 
floats. If you want to float multiple pairs of opposing floats within the same 
parent, you can insert a float divider between each pair to prevent them from 
stacking next to each other. 


You can assign min-width and max-width to each float to set its minimum 
width and maximum width. You can assign margin-left to the left float and 
margin-right to the right float to adjust their positions. 


HTML 
«div id-"SECTION ID"» 


«ELEMENT id="ID1"> ANY CONTENT </ELEMENT> 
«ELEMENT id="ID2"> ANY CONTENT </ELEMENT> 
«div class="float-divider"></div> 





«/div» 


CSS 
#ID1 { float:left; min-width:VALUE; max-width:VALUE; 
margin-left:+VALUE; } 


#ID2 { float:right; min-width:VALUE; max-width :VALUE; 
margin-right:+VALUE; } 


*.float-divider { clear:both; display:block; 
height:1px; font-size:1px; line-height:1px; } 
This pattern works anywhere because you can float inline or block elements. 


Internet Explorer 6 does not implement min-width and max-width, but Internet 
Explorer 7 does. These properties are not essential to this design. 


When floating text to the right, it is often better to omit min-width. This allows a 
browser to shrinkwrap the float to the minimum width of the text, which keeps 
the text aligned to the right side of the parent. If you want multiple lines of text to 
be aligned to the right, you can assign text-align:right to the float. 


Fluid Layout, Float Divider; Floated Box (Chapter 4); Margin (Chapter 6); Float 
and Clear (Chapter 7); Offset Float (Chapter 8); Blocked (Chapter 11) 


www. cssdesignpatterns.com/opposing-floats 
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Event Styling 


© Event Styling (Rollup) - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 


Event Styling (Rollup) 





Main 

FAQ Info 

Don't roll me up. - List 
QUESTION: How do rollups work? e list item 1 


e list item 2 
: Roll me up 











HTML 


«head» 
<!-- only script elements are shown --> 


«script language-"javascript" type-"text/javascript" src="yahoo.js"></script> 

«script language-"javascript" type-"text/javascript" src="event.js"></script> 

«script language-"javascript" type-"text/javascript" src="chdp.js"></script> 

«script language-"javascript" type-"text/javascript" src="cssQuery-p.js"></script> 

«script language-"javascript" type-"text/javascript" src="page.js"></script> 
</head> 


page.js 
function initPage() { 


assignEvent( 'click', '*.rollup-trigger', 
applyToChildrenOfAncestorWithClass, ‘rollup’, 
toggleClass, 'hidden' ); 


assignEvent( 'click', '*.rollup-trigger', 
applyToThis, null, 
toggleClass, 'rolledup' ); 
} 


addEvent(window, 'unload', purgeAllEvents); 
addEvent(window, 'load', initPage); 


/* 
The functions addEvent(), assignEvent(), applyToChildrenOfAncestorWithClass(), 
applyToThis(), and toggleClass() are in chdp.js. 
The source code contains full documentation for each function 
plus many more useful functions. 
*/ 
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Event Styling 


Problem 


Solution 


Overall pattern 


You want to attach events to HTML elements without putting JavaScript in 
the body of the document. You want to attach events to elements using CSS 
selectors so there is a direct connection between how elements are styled and 
how they respond to events. You want events to modify element classes so 
you can use stylesheets to control how dynamic HTML styles a document. In 
other words, you want to completely separate content, style, and JavaScript. 
You do not want to put JavaScript or styles in the content, and you do not 
want to put styles or content in the JavaScript code. 


You can use JavaScript libraries to attach events to elements at runtime. All 
you need are a few «script» tags in the document head to load the JavaScript 
libraries. This technique completely removes the need to put code in event 
attributes, such as «div onclick="someFunction();">. 


To attach events to elements at runtime, you can use two free open source 
libraries from Yahoo!: event. js and yahoo. js. They have a BSD license. Source 
and documentation are at http: //developer.yahoo.com/yui/. 


To select elements with CSS selectors in JavaScript, you can use a free open 
source library from Dean Edwards: cssQuery. js. It is licensed under LGPL 2.1. 
Source and documentation are at http: //dean.edwards.name/. 


To integrate these libraries, I provide an open source library called chdp. js. 
It is freely licensed under a BSD license, and is available at 
Www. Ccssdesignpatterns.com/event-styling. 


You can use these libraries by attaching their JavaScript files to your 
document in the order shown in the example. A browser downloads and 
executes each JavaScript file in the order it occurs in the document. The last 
JavaScript file is typically unique to the current page. It initializes the libraries, 
and it assigns event handlers to elements. 


In the example, I name this file page. js. There are only two executable 
statements in this file, and both are addEvent () functions. A browser quickly 
executes these two functions and continues downloading the document. 
The code does not slow down the rendering of the document, and it ensures 
events are added to elements after they exist. 


The first addEvent () function in page. js attaches a generic function called 
purgeAllEvents() to the page's unload event. When the page unloads, 
purgeAllEvents() purges all attached events from memory. The second 
addEvent() function attaches initPage() to the page's load event. After the 
page loads, initPage() assigns events to elements using assignEvent(). 


JavaScript in page.js 
function initPage() ( assignEvent( ... ); j 


addEvent(window, 'unload', purgeAllEvents); 
addEvent(window, 'load', initPage); 


(Continued) 
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Event Styling (Continued) 


Detailed pattern 


The functions addEvent (), purgeAllEvents(), and assignEvent() are in 
chdp. js. They are wrappers around functions in Yahoo!'s event. js. This 
makes it easy to replace the Yahoo! event library with another. 


The function assignEvent() is unique to chdp. js. Its purpose is to assign 
events and event handlers to elements using CSS selectors. This allows you to 
use the same CSS selectors to style elements and to attach events to elements! 
This conceptually ties the stylesheet into the dynamic HTML. 


JavaScript in page.js 

assignEvent( 'EVENT', 'CSS SELECTOR", 
EVENT HANDLER FUNCTION, ARG TO EVENT HANDLER, 
EVENT HELPER FUNCTION, ARG TO EVENT HELPER ); 


Using assignEvent(), you can apply multiple event handlers to the same 
event and elements. Event handlers are fired in the order they are listed in 
the code. In the example, I apply two different handlers to the click event 
of elements assigned to the rollup-trigger class. When a user clicks a 
rollup-trigger element, the click event fires, and the first event handler is 
called followed by the second. By chaining together generic event handlers, 
you can create powerful event handlers while writing very little code. 


The name of the event goes in the first argument of assignEvent(). It isa 
string. The name does not include the "on" prefix. In the example, I used 
'click' instead of 'onclick'. 


A CSS selector goes in the second argument of assignEvent(). It is a string 

that determines which elements get assigned to the event. You can use any 
CSS 2.1 selector including child and attribute selectors. This even works in 
Internet Explorer 6 because the selection is done using cssQuery. js. 


An event handler function goes in the third argument of assignEvent(). The 
event handler is called when the event fires. You can use any function. I 
supply three generic functions in chdp. js: applyToThis(), 
applyToDescendants(), and applyToChildrenOfAncestorlWithClass(). These 
three functions make it easy to modify the element raising the event, its 
descendants, or the children of one of its ancestors. These functions are 
generic because they apply a helper function of your choosing to a set of 
elements. 


applyToThis() applies a helper function to the element that fired the event. 
This makes it easy to style an element in response to an event. 


applyToDescendants () applies a helper function to each descendant of the 
element that fired the event. You can filter which descendants are affected by 
supplying a CSS selector in the fourth argument of assignEvent(). Since the 
selector can be any CSS 2.1 selector, this is a very useful function! You can use 
this function to selectively style descendants based on an event raised by a 
parent. For example, you can show some descendants when the user mouses 
over the parent and hide some when the user mouses out. 
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Event Styling (Continued) 


Explanation 


Tips 


Example 


Related to 
See also 


applyToChildrenOfAncestorWithClass() searches up the document tree for 
the first ancestor that has the class specified in the fourth argument of 
assignEvent(). It then applies the helper function to all its children except for 
the child containing the element that fired the event. This function allows you 
to trigger an event using one element and have the event affect the children of 
an ancestor. I use this function to implement the Rollup design pattern. 


An optional argument goes in the fourth argument of assignEvent(). 

It is passed to the event handler when the event is fired. For example, 
applyToDescendants() expects this argument to be a string containing a CSS 
selector that filters which descendants should be processed by the event 
helper. applyToChildrenOfAncestorWithClass() expects this argument to be 
a string containing a class name, which it uses to select an ancestor of the 
element that fired the event. applyToThis() does not use this argument. 


A helper function goes in the fifth argument of assignEvent(). It can be any 
function. I supply five helper functions in chdp. js that modify the class 
attribute of elements as follows: 

addClass() adds a class to an element. 

removeClass() removes a class from an element. 

replaceClass() replaces an existing class with another one. 

toggleClass() adds a class when not present and removes it when present. 
swapClasses() swaps out one class for another, and vice versa. 





By using event handlers to modify the classes assigned to elements, you can 
control how your document responds to events by using a stylesheet! This 
keeps content, code, and styles separate, which improves productivity and 
reduces maintenance. By simply toggling classes, swapping them in and out, 
and adding, removing, or replacing them, you can create just about any effect! 


This design pattern is extensible. You can create your own event handler and 
helper functions. To make it easy to extend, chdp. js contains additional 
utility functions to manipulate strings and elements, and to aid in debugging. 


The most commonly used events are onclick, onmouseover, and onmouseout. 
Forms often use onsubmit and onreset. Any event handler can affect 
accessibility, but the following events require much more effort and testing 
to keep a document accessible. Form elements can use onchange, onfocus, 
onblur, and onselect. Advanced techniques can use onkeydown, onkeypress, 
onkeyup, onmousedown, onmousemove, and onmouseup. 


You can combine libraries into a single packed file using a JavaScript 
compressor. Compressed JavaScript downloads faster and is parsed faster. A 
free JavaScript compressor is located at http: //dean.edwards.name/packer/. 


In the example, when the user clicks a rollup-trigger element, the hidden 
class is applied to all children of the rollup element except for the child 
containing the rollup trigger. When the user clicks the rollup trigger again, 
the hidden class is removed. You can create a rollup effect by styling the 
hidden class to hide elements, or you could create some other effect. 


Rollup, Tabs, Flyout Menu; Popup Alert (Chapter 20) 


Www. cssdesignpatterns.com/event-styling 
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Rollup 


©) Rollup - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Rollup 





Main 
FAQ Info 
Don't roll me up. List 
QUESTION: How do rollups work? 





e list item 1 
e list item 2 
Roll me up 





HTML 
<h1>Rollup</h1> 


<div id="main" class="rollup"> 
«h2 class="rollup-trigger">Main</h2> 


«div id="faq"><div class-"oi rollup"> 
«h3 class="rollup-trigger">FAQ</h3> Don't roll me up. 
«dl class="rollup"> 
«dt class="rollup-trigger">QUESTION: How do rollups work?</dt> 
<dd class="hidden">ANSWER: When the user clicks on a heading or button, 
the content rolls up or down. «/dd»«/dl»«/div»«/div» 


«div id-"info"»«div class-"oi rollup"> 
«h3 class="rollup-trigger">Info</h3> 
«div class="rollup"> 
<p><span class-"rollup-trigger"»&nbsp;«/span»list«/p» 
«ul» «li»list item 1«/li» «li»list item 2«/li»«/ul»«/div» 


«em»«span class-"rollup-trigger"»&nbsp;«/span»Roll me up«/em»«/div»«/div» 
«div class-"float-divider"»«/div»«/div» 


CSS 


*.rollup-trigger ( cursor:pointer; ] 
*.rollup-trigger:hover { color:firebrick; } 


span.rollup-trigger ( font-size:0.65em; padding-left:8px; 
background:url("hide.gif") no-repeat left top; } 


span.rolledup ( background:url("show.gif") no-repeat left top; } 


*.hidden ( position:absolute; top:-99999px; left:-99999px; 
width:1px; height:1px; overflow:hidden; } 


/* Nonessential rules are not shown. */ 


Rollup 


Problem 


Solution 


Pattern 


Location 
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You want the user to dynamically interact with sections, FAQs, lists, and so 
forth by rolling them up to hide information and rolling them down to show 
information. You want to do this without adding code to the HTML document. 
You want to use styles to control the dynamic behavior. 


You can add the rollup class to any parent element. This identifies it as a 
container that can roll up its content. You can add the rollup-trigger class 

to any child in the rollup container. When the user clicks the rollup-trigger 
element, all content in the rollup element rolls up except for the rollup-trigger 
element. When the user clicks the rollup-trigger element again, the content 
rolls down. 


The rollup class is typically assigned to a section's container, and the 
rollup-trigger class is typically assigned to a section's heading. In the example, 
I assigned the rollup class to each section and the rollup-trigger class to each 
section heading. You can click a heading to roll up or roll down each section. 


The rollup-trigger class can be assigned to any descendant of the rollup 
container. In the example, I assign it to the dictionary term, «dt». Its parent, «dl», 
is its rollup container. You can click the dictionary term to roll up and roll down 
the dictionary definition, «dd». 


When you want a child of a rollup container to start out rolled up, you can set it 
to the hidden class. In the example, the dictionary definition element is set to 
hidden so it starts out rolled up when the page loads. 


This design pattern rolls up elements by setting them to hidden. It rolls them 
down by removing hidden from their class. The hidden class is styled using the 
Screenreader-only design pattern (Chapter 10), which hides elements on the 
screen without hiding them from screen readers. 


HTML 

«ELEMENT class-"rollup"» 
«ELEMENT class-"rollup-trigger"»CONTENT«/ELEMENT» 
«ELEMENT class="hidden"></ELEMENT> 

«/ ELEMENT» 


CSS 
*.rollup-trigger { cursor:pointer; } 
*.rollup-trigger:hover { STYLES } 


span.rollup-trigger ( font-size:VALUE; padding-left:VALUE; 
background:url("FILE.EXT") no-repeat; } 
span.rolledup { background:url("FILE.EXT") no-repeat; } 


* hidden { position:absolute; 
top:-99999px; left:-99999px; 
width:1px; height:1px; overflow:hidden; } 


This pattern works anywhere. 


(Continued) 
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Rollup (Continued) 


HTML Header 


«head» 
<!-- only script elements are shown --> 


«script language-"javascript" type-"text/javascript" src="yahoo.js"></script> 

«script language-"javascript" type-"text/javascript" src="event.js"></script> 

«script language-"javascript" type-"text/javascript" src="chdp.js"></script> 

«script language-"javascript" type-"text/javascript" src="cssQuery-p.js"></script> 

«script language-"javascript" type-"text/javascript" src="page.js"></script> 
</head> 


page.js 
function initPage() { 
assignEvent( 'click', '*.rollup-trigger', 


applyToChildrenOfAncestorWithClass, 'rollup', 
toggleClass, 'hidden' ); 





assignEvent( 'click', '*.rollup-trigger', 
applyToThis, null, 
toggleClass, 'rolledup' ); 
} 


addEvent (window, 'unload' , purgeAllEvents) ; 
addEvent (window, 'load',initPage); 


//The functions addEvent() and assignEvent() are in chdp.js. 
//Full documentation for each function is found in the source code. 
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Rollup (Continued) 


Limitations 


Tips 


JavaScript 


Pattern 


Related to 


See also 


Text placed directly inside the rollup container is not rolled up. In the example, 
the text "Don' roll me up." does not get rolled up with the rest of the FAQ. If you 
want text to be rolled up, place it inside any element. It does not matter whether 
the element is block or inline. Also, this design pattern fails to roll up text when 
JavaScript is not available. 


You can insert an element specifically to be the rollup trigger, and you can place 
it anywhere inside the rollup parent. In the example, I insert two spans and 
assign them to the rollup-trigger class. Since these are inline elements, I use 
font-size and padding to size their height and width large enough to allow a 
background image to show through. This turns the span into a rollup button. 
Using this technique, you can put a rollup button in front of any element. (You 
can also float it to the right if you want.) When the user clicks a rollup button, 
everything in the rollup container rolls up except for the button and its 
ancestors. 


When the user clicks a rollup trigger, the JavaScript code dynamically adds 
or removes the rolledup class to the element. In the example, I use the 
span.rolledup selector to change the background image when the parent 
is rolled up. This creates a dynamic button effect. 


The first assignEvent() function applies the onclick event to all elements 

that are assigned to the rollup-trigger class. When the onclick event fires, 
applyToChildrenOfAncestorWithClass() applies toggleClass() to each child of 
the ancestor element that has the rollup class, except to the child that contains 
the element that fired the event. The toggleClass() function toggles the 
presence of the hidden class. If an element is already assigned to the hidden class, 
itis removed. If an element is not assigned to the hidden class, it is added. In the 
example, I styled the hidden class to hide an element on screen while leaving it 
readable by screen readers. 


The second assignEvent() function applies the onclick event to all elements 
that are assigned to the rollup-trigger class. When the onclick event fires, 
applyToThis() applies toggleClass() to the element that fired the event (the 
rollup-trigger element). The toggleClass() function toggles the presence of 
the rolledup class. In the example, I styled the rolledup class to change the 
background image of any spans assigned to it. This allows a rollup button to 
change its image when it is rolled up. 


JavaScript 

assignEvent( 'click', '*.rollup-trigger', 
applyToChildrenOfAncestorWithClass, 'rollup', 
toggleClass, 'hidden' ); 


assignEvent( 'click', '*.rollup-trigger', 
applyToThis, null, 
toggleClass, 'rolledup' ); 


Event Styling; Margin, Padding, Background (Chapter 6); Positioned, Absolute 
(Chapter 7); Offset Absolute and Offset Fixed (Chapter 8); Font, Screenreader- 
only (Chapter 10) 


www. Ccssdesignpatterns.com/rollup 
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Tab Menu 


© Tab Menu - Mozilla Firefox 
Ele Edit View History Bookmarks Tools Help 


Tab Menu 


Tab 1 Tab 2 Tab 3 


Tab 1 content: A click on ond ur these tabs loads a new page. 





HTML 


<h1>Tab Menu«/h1» 


«div id-"main"» 
«ul class-"tabs"» 
«li class="selected"> 
«h3 class="tab-label"><a href-"example.html"»Tab 1«/a»«/h3»«/li» 
«li»«h3 class-"tab-label"»«a href-"example2.html"»Tab 2«/a»«/h3»«/li» 
«li»«h3 class="tab-label"><a href-"example3.html"»Tab 3«/a»«/h3»«/li» 
«li»«h3 class="tab-label"><a href-"example4.html"»Tab 4«/a»«/h3»«/li» 
«/ul» 
<p>Tab 1 content: A click on one of these tabs loads a new page.«/p» 
«/div» 


CSS 


ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active 

{ text-decoration:none; color:maroon; } 
ul.tabs a:hover ( text-decoration:underline; color:black; ) 
ul.tabs a ( display:block; } 


ul.tabs ( float:left; width:100%; padding:0; margin:0; 
border-bottom:1px solid gold; margin-bottom:10px; } 


ul.tabs li { float:left; width:25%; list-style-type:none; } 


ul.tabs *.tab-label { border:1px solid gold; margin:0; cursor:pointer; 
padding-bottom:2px; padding-top: 2px; 
background:white url("g1.jpg") repeat-x left bottom; 
font-weight:normal; text-align:center; font-size:1.1em; } 


ul.tabs li.selected *.tab-label { position:relative; border-bottom: none; 
top:1px; padding-bottom: 4px; 
padding-top:5px; border-top:2px solid gold; margin-top: -5px; 
background:white url("g2.jpg") repeat-x left top; font-weight:bold; } 


#main { border:1px solid gold; border-top:none; } 
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Tab Menu 


Problem 


Solution 


Pattern 


You want to create a menu of links that works like a tabbed user interface. You 
want it to adapt reliably and fluidly to different environments. 


You can place the list of links in an unordered list (<ul>) and assign the list to the 
tabs class. You can place a hyperlink inside each list item («1i»). Since each link 
functions as a tab heading, you can embed the link within a heading element. 
This gives the link a higher importance to search engines and makes it easier for 
nonsighted users to navigate with screen readers. The heading is also an outside- 
in box. This allows you to style the box of each tab without affecting the outer 
width of the tab. 


When the user clicks a link, you want a browser to replace the current page with 
the page referenced by the link. If the new page also contains the same tabbed 
menu with the new tab selected, you can create the illusion of switching tabs. To 
change the look of selected tabs, you can assign the selected class to the list item 
containing the link of the currently displayed page. In the example, the first tab is 
selected. Moving the selected class to another list item makes it appear selected. 


HTML 
«ul class-"tabs"» 
«li class-"selected"» 
«h3 class-"tab-label"» 
«a href="URL">Tab 1«/a»«/h3»«/li»«/ul» 





CSS 

ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active { STYLES } 
ul.tabs a:hover, ul.tabs a:focus { STYLES } 

ul.tabs a { display:block; } 


ul.tabs ( float:left; width:100%; padding:0; margin:0; 
margin-bottom:+VALUE; border-bottom: TAB_BOTTOM STYLE COLOR; } 


ul.tabs li { float:left; width:PERCENT; list-style-type:none; } 


ul.tabs *.tab-label { border:BORDER_WIDTH STYLE COLOR; 
padding-bottom: PADDING BOTTOM; 
padding-top: PADDING_TOP; 
margin:0; cursor:pointer; 
background:COLOR IMAGE REPEAT OPTIONS POSITION; 
font-weight:normal; text-align:center; } 


ul.tabs li.selected *.tab-label 

( position:relative; border-bottom:none; font-weight:bold; 
top:TAB BOTTOM; cursor:auto; 
padding-bottom: TAB_BOTTOM+PADDING_BOTTOM+BORDER_WIDTH; 
border-top:BORDER_WIDTH+EXTRA_BORDER STYLE COLOR; 
padding-top:PADDING TOP+EXTRA PADDING; 
margin-top:-(TAB BOTTOM-EXTRA BORDER-«EXTRA PADDING); 
background:COLOR IMAGE REPEAT OPTIONS POSITION; } 


#SECTION ( border:WIDTH STYLE COLOR; border-top:none; } 


(Continued) 
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Tab Menu (Continued) 


© Tab Menu - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Tab Menu 


Tab 1 Tab 2 Tab 3 


Tab 1 content: A click on Se these tabs loads a new page. 





HTML (Same Code Shown Again for Convenience) 


<hi>Tab Menu«/h1» 


«div id-"main"» 
«ul class-"tabs"» 
«li class="selected"> 
«h3 class="tab-label">Tab 1«/h3»«/li» 
«li»«h3 class-"tab-label"»«a href-"example2.html"»Tab 2«/a»«/h3»«/li» 
«li»«h3 class-"tab-label"»«a href-"example3.html"»Tab 3«/a»«/h3»«/li» 
«li»«h3 class="tab-label"><a href-"example4.html"»Tab 4«/a»«/h3»«/li» 
«/ul» 
«p»Tab 1 content: A click on one of these tabs loads a new page.</p> 
«/div» 


CSS (Same Code Shown Again for Convenience) 


ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active 
{ text-decoration:none; color:maroon; } 
ul.tabs a:hover, ul.tabs a:focus 
( text-decoration:underline; color:black; } 
ul.tabs a ( display:block; } 


ul.tabs { float:left; width:100%; padding:0; margin:0; 
border-bottom:1px solid gold; margin-bottom:10px; } 


ul.tabs li { float:left; width:25%; list-style-type:none; } 


ul.tabs *.tab-label { border: 1px solid gold; margin:0; cursor:pointer; 
padding-bottom:2px; padding-top: 2px; 
background:white url("g1.jpg") repeat-x left bottom; 
font-weight:normal; text-align:center; font-size:1.1em; } 


ul.tabs li.selected *.tab-label { position:relative; border-bottom:none; 
top:1px; padding-bottom:4px; cursor:auto; 
padding-top:5px; border-top:2px solid gold; margin-top: -5px; 
background:white url("g2.jpg") repeat-x left top; font-weight:bold; } 


#main { border:1px solid gold; border-top:none; } 
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Tab Menu (Continued) 


Location 
Styles 


Related to 


See also 


This pattern works anywhere a list can be used. 


You can style tab links to interact dynamically with the user. The selectors are 
ul.tabs a:link,ul.tabs a:visited,ul.tabs a:active,ul.tabs a:hover, and 
ul.tabs a:focus.In the example, I hide a tab link's underline until the user 
mouses over it. This keeps the user interface uncluttered. You can render links 
as blocks so they will stretch to the width of their tab. This allows the user to 
click anywhere inside a tab to activate the link. 


You can float the tab menu container so it encompasses its floated tabs. The 
selector is ul. tabs. You can make the layout more flexible by setting its width to 
100% so it stretches to the width of its container. When using an unordered list, 
you need to remove its default margins and padding so they do not interfere with 
the position of the tabs. You can use margin-bottom to put distance between the 
tab menu and subsequent content. You can also set the bottom border. In the 
example, I use a 1-pixel, solid, gold bottom border. 


To make list items look like tabs, you can float them to the left. The selector is 
ul.tabs li. You can assign a percentage to their width that is the inverse of the 
number of tabs, such as 16.66% for six tabs, 14.28% for seven, 12.5% for eight, 
11.1196 for nine, 1096 for ten, and so forth. For percentages to work, the list item 
must have no left or right margins, borders, and padding. You can assign list 
items to list-style-type:none to hide their bullets. 





To style the tab's box, you can select the element that has the tab- label class. 
You can put a border around it, pad its content, and add a background image. 

In the example, I use a gradient image that transitions from white to gold going 
from top to bottom. Moving from a lighter color at the top to a darker color at the 
bottom supports the illusion that the tab is not selected. The reverse makes the 
tab look selected. You should set its margins to zero; otherwise, they will break 
the tab effect. You can set the cursor to the hand pointer to signal that the tab 
can be clicked. You can set font-weight to normal when not selected and bold 
when selected. You can align text in the tab label to the center. 


To make a tab look selected, you can assign the selected class to it and style 
that class. The selector is ul.tabs li.selected *.tab-label.You can use 
border-bottom:none to remove its bottom border, and you can increase its 
bottom padding to compensate. The selected tab also needs to cover the bottom 
border of the tab container ul.tabs. To do so, you can increase its bottom 
padding to cover the tab container's bottom border, and you can relatively 
position it to move it over the border. You can add extra thickness to the selected 
tab's top border to make it stand out. You can add extra top padding to raise it 
above nonselected tabs. You can use a negative value in margin-top to 
compensate for the extra padding and border. 


You can put a border around the left, right, and bottom of the section containing 
the tab menu to connect the tab menu with the section's content. 


Floated Box (Chapter 4); Width, Sized, Stretched (Chapter 5); Margin, Border, 
Padding, Background, Overflow (Chapter 6); Positioned, Relative, Float and 
Clear, Relative Float (Chapter 7); Offset Float, Aligned Static Inline (Chapter 8); 
Font (Chapter 10); Blocked (Chapter 11); Lists (Chapter 13) 
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Tabs 


©) Tabs - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Tabs 


Tab 1 Tab 2 


D 


Tab 1 Content 


This is the message of tab 1. More message... I added more to this message 
to show how the tab automatically displays scrollbars when it exceeds the 
height and/or width of the tab container. Most of this text is not shown in 





HTML 


<h1>Tabs</h1> 


<ul class="tabs"> 

<li class="selected"><h3 class="tab-label"><a href="example.html">Tab 1</a></h3> 
«div id="section1" class-"tab-content"»«div class="0i2"> 
<h4>Tab 1 Content</h4><p>This is the message of tab 1. More message... 
</p></div></div></li> 





<li><h3 class-"tab-label"»«a href="example2.html">Tab 2«/a»«/h3» 
«div id-"section2" class="tab-content"><div class="0i2"> 
<h4>Tab 2 Content</h4><p>This is the message of tab 2. 
</p></div></div></li></ul> 


CSS 


/* All rules from the Tab Menu design pattern apply to Tabs. 
Only additional rules that apply to this design pattern are shown here. */ 


ul.tabs ( position:relative; ] 

ul.tabs *.tab-content { position:absolute; width:100%; height:6em; 
border:1px solid gold; border-top:none; 
left:-99999px; overflow:auto; } 

ul.tabs li.selected *.tab-content { left:0; } 

ul.tabs li *.oi2 ( margin:10px; padding:10px; } 

ul.tabs *.tab-label a { display:block; text-decoration:none; color:black; } 


ul.tabs *.hover, 
ul.tabs *.tab-label:hover { text-decoration:underline; } 


/* Nonessential rules are not shown. */ 


Tabs 


Problem 


Solution 


Pattern 
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You want to create a tabbed user interface that displays the contents of tabs 
without loading new pages. You want it to adapt reliably and fluidly to different 
environments. 


You can use the Tab Menu design pattern to turn a list into tabs. Inside each list 
item, you can insert a tab- label heading and a tab-content section. You can use 
a variation of the Screenreader-only design pattern to remove the section from 
the normal flow and hide it offscreen to the left. 


The key to this design pattern is relatively positioning the tabs list in place and 
absolutely positioning each tab-content element in relation to it. This makes the 
tabs list the closest positioned ancestor of each tab-content element. Because of 
this, you can use width:100 to stretch the tab content to the width of the tabs 
list. Otherwise, the tab-content element would expand to the width of its parent 
list item, which has been floated left. 


You should leave the tab-content element's top property set to its default value 
of auto so the tab-content element will be automatically positioned at the same 
location it would have been if it were not absolutely positioned. This keeps tabs 
and their content positioned properly—even if tabs become wrapped. 


If you want the height to remain the same for all tabs, you can assign a height to 
the tab-content element, or you can leave it at its default value of auto and let a 
browser shrinkwrap the height of each tab to its content. If you size it, you can 
use overflow:auto to display scrollbars when content overflows. 





You can assign the selected class to the list item you want to be displayed when 
the page loads. 


You can insert a link around each tab-1label element to load a fallback page 
when the user clicks a tab and JavaScript is not available to switch tabs. 


HTML 
«ul class="tabs"> 
«li class="selected"> 
«h3 class="tab-label"> 
«a href-"FALLBACK PAGE.html"» TAB LABEL «/a»«/h3» 
«div id-"SECTION ID" class="tab-content"><div class="0i2"> 
TAB CONTENT «/div»«/div» 
</li> 
</ul> 


CSS 
ul.tabs ( position:relative; } 


ul.tabs *.tab-content { position:absolute; 
width:100%; height:VALUE; 
border:WIDTH STYLE COLOR; border-top:none; 
left:-99999px; overflow:auto; ] 


ul.tabs li.selected *.tab-content { left:0; } 

ul.tabs li *.oi2 { margin:VALUE; padding:VALUE; } 

ul.tabs *.tab-label a { display:block; text-decoration:none; } 
ul.tabs *.hover, 

ul.tabs *.tab-label:hover { text-decoration:underline; } 


(Continued) 
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Tabs (Continued) 


HTML Header 


«head» 


<!-- only script elements are shown 


«script language-"javascript" type- 
«script language-"javascript" type- 
«script language-"javascript" type- 
«script language-"javascript" type- 
«script language-"javascript" type- 


«/head» 


page.js 
function initPage() { 


--> 


"text/javascript" 
"text/javascript" 
"text/javascript" 
"text/javascript" 
"text/javascript" 


assignEvent( 'click', 'ul.tabs li', 
applyToChildrenOfAncestorWithClass, 'tabs', 
removeClass, 'selected' ); 


assignEvent( 'click', 'ul.tabs li', 
applyToThis, null, addClass, 'selected' ); 


assignEvent( 'mouseover', 'ul.tabs li *.tab-label', 
applyToThis, null, addClass, 'hover' ); 


assignEvent( 'mouseout', 





'ul.tabs 


li *.tab-label', 


applyToThis, null, removeClass, 'hover' ); 


assignEvent( 'click', 'ul.tabs *.tab-label a', 
applyToThis, null, ignoreLink ); 





} 


src="yahoo. js"></script> 
src="event.js"></script> 
src="chdp.js"></script> 
src="cssQuery-p.js"></script> 
src-"page.js"»«/script» 


function ignoreLink(eElement, e, extraInfo) { eElement.blur(); return false; } 


addEvent(window, 'unload', purgeAllEvents); 
addEvent(window, 'load', initPage); 


//The functions addEvent() and assignEvent() are in chdp.js. 
//Full documentation for each function is found in the source code. 
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Tabs (Continued) 


JavaScript 


Pattern 


Tip 


Related to 


See also 


The first assignEvent() function applies the onclick event to all list items inside 
the tabs list. When onclick fires, applyToChildrenOfAncestorWithClass() applies 
removeClass() to each child of the ancestor element that has the tabs class, 
except to the child that contains the element that fired the event. In this case, 
the removeClass() function removes the selected class from the element. By 
removing this class, the left rule in the ul.tabs *.tab-content selector applies 
to the element (instead of the left rule in ul.tabs li.selected *.tab-content) 
and moves it far off the left side of the screen where it cannot be seen, but can 
still be read by screen readers. 


The second assignEvent() function applies the onclick event to all list items 
inside the list assigned to the tabs class. When onclick fires, applyToThis() 
applies addClass() to the element that fired the event to add the selected class 
to the element. In the example, I styled the selected class to override the left 
rule in the ul.tabs *.tab-content so that it would move the tab-content 
element into the display area so the user can see it. 


The third assignEvent() function applies the onmouseover event to all tab- label 
elements inside tab list items. When onmouseover fires, applyToThis() applies 
addClass() to the element that fired the event to add the hover class to the 
element. In the example, I styled the hover class and the hover pseudo class to 
underline the element' text. 





The fourth assignEvent() function works like the third, except it applies 
removeClass() to the element that fired the event to remove the hover class 
from the element so that it is no longer styled as being hovered over. 


The fifth assignEvent() function captures clicks on links inside tab-label 
elements and executes the ignoreLink() function, which hides the focus 
rectangle around the link and cancels the jump. When JavaScript is available, 
clicks display tab content without loading new pages; and when JavaScript is 
not available, clicks load pages just like the Tab Menu design pattern. 


JavaScript 
assignEvent( 'click', 'ul.tabs li', 
applyToChildrenOfAncestorWithClass, 'tabs', 
removeClass, 'selected' ); 
assignEvent( 'click', 'ul.tabs li', 
applyToThis, null, addClass, 'selected' ); 
assignEvent( 'mouseover', 'ul.tabs li *.tab-label', 
applyToThis, null, addClass, 'hover' ); 
assignEvent( 'mouseout', 'ul.tabs li *.tab-label', 
applyToThis, null, removeClass, 'hover' ); 
assignEvent( 'click', 'ul.tabs *.tab-label a', 
applyToThis, null, ignoreLink ); 











The tab-content element can contain any content: blocks, inlines, tables, 
images, objects, and so on. This makes the Tabs design pattern a very powerful 
technique to make large amounts of information in a document easy and fast to 
navigate without compromising accessibility for nonsighted users. 


Tab Menu, Event Styling; Absolute Box (Chapter 4); Width, Height, Stretched 
(Chapter 5); Margin, Border, Padding, Background, Overflow (Chapter 6); 
Positioned, Absolute, Relative (Chapter 7); Offset Absolute and Offset Fixed 
(Chapter 8); Left Aligned (Chapter 9); Screenreader-only (Chapter 10); Blocked, 
Inline Decoration (Chapter 11); Section (Chapter 13) 
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Flyout Menu 


C J Flyout Menu - Mozilla Firefox 
Ele Edit View Go Bookmarks Tools Help 


Flyout Menu 


Dropdown 


menu item 


menu item 


EUER menu item 





HTML 


«div class="menu"><h3>Dropdown</h3> 
«ul class-"dropdown hidden"» 

<li><a href="#">menu item«/a»«/li» 

«li class-"separator"»«a href="#">menu item«/a»«/li» 

«li class="flyout-trigger"><h4>submenu</h4> 

«ul class-"submenu hidden"» 

«li»«img src-"award.gif" alt-"award" /»«a href="#">menu item«/a»«/li» 
<li><a href="#">menu item«/a»«/li»«/ul»«/li»«/ul»«/div» 


CSS 


*.menu ( float:left; position:relative; z-index:1; cursor:pointer; 
font-size:0.8em; white-space:nowrap; } 
*.menu a ( text-decoration:none; color:black; } 


*.menu h3 ( float:left; margin:0; padding:1px 5px; 
background:url("gi.jpg") repeat-x left bottom white; } 

*.menu h4 ( display:inline; margin:0; } 

*.menu ul ( position:absolute; margin:0; padding:0; padding-bottom:5px; 
background:url("g3.jpg") repeat-x left bottom white; ] 


.menu li { margin:0; padding:2px 25px; list-style-type:none; color:black; } 

.menu li img { margin-left:-22px; padding-right:5px; j 

.menu li.separator ( margin-top:5px; border-top:1px solid gray; padding-top:5px; } 
.menu li.flyout-trigger ( background:url("flyouti.gif") no-repeat right center; ] 
.menu li.flyout-trigger.hover 

( background:url("flyout2.gif") no-repeat right center firebrick; } 

.menu h3.hover { background:url("g2.jpg") repeat-x left top white; } 

.menu li.hover ( background-color:firebrick; color:white; ] 

.menu li.hover > a { color:white; } 

.menu ul.dropdown { top:100%; clear:left; } 

.menu ul.submenu { left:100%; margin-top:-1.5em; margin-left:-0.3em; } 

.menu *.hidden { left:-99999px; top:-99999px; } 

.menu h3,*.menu ul ( border-left:1px solid yellow; border-right:1px solid orange; 
border-top:ipx solid yellow; border-bottom:1px solid orange; } 


* * * o X X 





*o* o * *¥ X X X 


/* Nonessential rules are not shown. */ 
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Flyout Menu 


Problem 


Solution 


Pattern 


You want to create a flyout menu that can contain nested menus. 


You can use a division assigned to the menu class as the overall container for the 
menu. You can insert a heading, such as «h3», as the first child of the division to 
be the menu title. You can insert an unordered list assigned to the dropdown class 
to be the container for the drop-down menu. You can insert list items to create 
menu items. For the content of a menu item, you can insert an image followed 
by a link containing the menu item's text. 


To create a nested flyout menu, you can embed another unordered list assigned 
to the submenu class inside a menu item assigned to the flyout-trigger class. 
When the user mouses over the flyout-trigger menu item, it triggers the display 
of the flyout menu. You can use a heading instead of a link to mark up the text of 
the flyout-trigger menu item. 


To hide menus until the user activates them, you can assign unordered lists to 
the hidden class. To put a separator between list items, you can assign the 
separator class to them. 


HTML 
«div class="menu"> 
«h3» MENU TTTLE CONTENT «/h3» 
«ul class-"dropdown hidden"» 
di» 
«img src-"FILE.EXT" alt-"ALT TEXT" /» 
«a href-"URL"» MENU ITEM CONTENT «/a» «/li»«/ul»«/div» 





CSS 

*.menu ( float:left; position:relative; z-index:VALUE; 
cursor:pointer; white-space:nowrap; } 

.menu a ( LINK STYLES; } 

.menu h3 ( MENU TITLE BOX STYLES; float:left; margin:0; } 
.menu h3.hover ( MENU TITLE HOVER BOX STYLES; } 

.menu ul ( MENU CONTAINER BOX STYLES; position:absolute; 
margin:0; padding:0; padding-bottom:BUFFER; } 





* * * X 


* 


.menu li { MENU ITEM BOX STYLES; margin:0; 

list-style-type:none; padding-left:LEFT MENU ITEM PADDING; } 
.menu li.hover ( MENU ITEM HOVER BOX STYLES; } 

.menu li.hover > a ( MENU ITEM HOVER LINK STYLES; } 

.menu li img ( margin-left:-LEFT MENU ITEM PADDING; } 

.menu li.separator ( margin-top:+VALUE; padding-top:+VALUE; 
border-top:WIDTH STYLE COLOR; } 

.menu li.flyout-trigger ( background:FLYOUT ARROW; } 

*.menu li.flyout-trigger.hover ( background:HOVER FLYOUT ARROW; } 





* ** X 


* 





*.menu ul.dropdown { top:100%; clear:left; } 

*.menu ul.submenu ( left:100%; 
margin-top:-1.5em; margin-left:-0.3em; } 

*.menu *.hidden ( left:-99999px; top:-99999px; ) 


(Continued) 
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Flyout Menu (Continued) 


HTML Header 


«head» 
<!-- only script elements are shown --> 


«script language-"javascript" type-"text/javascript" src="yahoo.js"></script> 

«script language-"javascript" type-"text/javascript" src="event.js"></script> 

«script language-"javascript" type-"text/javascript" src="chdp.js"></script> 

«script language-"javascript" type-"text/javascript" src="cssQuery-p.js"></script> 

«script language-"javascript" type-"text/javascript" src="page.js"></script> 
</head> 


page.js 
function initPage() { 


assignEvent( 'click', '*.menu', 
applyToDescendants, '*.dropdown', toggleClass, "hidden" ); 





assignEvent( 'mouseover', '*.menu', 
applyToDescendants, '*.dropdown', removeClass, "hidden" ); 


assignEvent( 'mouseout',  '*.menu', 
applyToDescendants, '*.dropdown', addClass, "hidden" ); 


assignEvent( 'mouseover', '*.menu li, *.menu h3', 
applyToThis, null, addClass, "hover" ); 


assignEvent( 'mouseout', '*.menu li, *.menu h3', 
applyToThis, null, removeClass, "hover" ); 


assignEvent( 'mouseover', '*.menu li.flyout-trigger', 
applyToDescendants, '» *.submenu', removeClass, "hidden" ); 


assignEvent( 'mouseout', '*.menu li.flyout-trigger', 
applyToDescendants, '» *.submenu', addClass, "hidden" ); 





} 


addEvent(window, 'unload', purgeAllEvents); 
addEvent(window, 'load', initPage); 


//The functions addEvent() and assignEvent() are in chdp.js. 
//Full documentation for each function is found in the source code. 
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Flyout Menu (Continued) 


Location 
Styles 


JavaScript 


Limitations 


Related to 


See also 


This pattern works anywhere a list can be used. 


You can float the drop-down menu and its title to the left to shrinkwrap the 
menu and to stack multiple drop-down menus next to each other. You can 
assign position:relative to the drop-down menu so the unordered list can be 
absolutely positioned in relation to it. If you have other relatively positioned 
content, you can set z- index to a high-enough value to move the menu to the 
front. You can use white-space:nowrap to ensure list items are not wrapped 
across multiple lines. 


You can remove all the default margins and padding on headings, lists, and list 
items. You can use list-style-type:none to remove all bullets from list items. 
You can create extra left padding inside each list item so you can move images 
into this area with a negative left margin. This keeps images and text aligned in 
two columns when there is no image in a menu item. 


You can position a drop-down menu below its title by setting top to 10096. You 
can position a flyout menu to the right of its flyout-trigger element by setting 
left to 100%. You can compensate for a flyout menu being positioned lower 
than its flyout-trigger by using margin-top:1.5em to raise it. You can use 
margin-left:-0.3emto overlap the flyout menu over its parent menu. You should 
use em measurements because they scale with the text when the user zooms in. 
You can hide menus by moving them off screen. 





You can apply box styles to the following menu elements: h3, ul, and 1i. 


The first three assignEvent() functions add, remove, or toggle the presence of 
the hidden class, which determines whether the drop-down menu is visible or 
not. Since the hidden class simply moves the menu off the screen, it is completely 
accessible to screen readers. 


The next two assignEvent () functions add or remove the hover class from menu 
items and the menu title. The hover class can be used to create hover effects. This 
is more reliable than the hover pseudo class, which is not fully implemented in 
Internet Explorer 6. 


The last two assignEvent() functions add or remove the hidden class of submenus 
when the user hovers over a menu item assigned to the flyout-trigger class. 
Notice that the applyToDescendants selector, '» *.submenu', contains a child 
selector to limit the scope to just the child submenu rather than all descendant 
submenus. Even though Internet Explorer 6 does not support the child selector, 
it works in this code because the JavaScript library cssQuery-p. js supports all 
CSS selectors. 


Single-level menus work fine, but nested menus have limitations. Nested menus 
do not work well in Opera 9. Since nested menus are absolutely positioned, they 
do not adapt to narrow displays. Internet Explorer 6 does not support the child 
selector, which is essential for properly styling nested menus. Lastly, menus do 
not fly out when JavaScript is not available. 


Event Styling; Absolute Box, Floated Box (Chapter 4); Width, Height, 
Shrinkwrapped, Stretched (Chapter 5); Margin, Border, Padding, Background, 
Overflow (Chapter 6); Positioned, Atomic, Absolute, Relative, Float and Clear, 
Relative Float (Chapter 7); Offset Absolute and Offset Fixed, Aligned Outside 
(Chapter 8); Left Aligned (Chapter 9); Screenreader-only (Chapter 10); Blocked, 
Nowrap, Inline Decoration (Chapter 11); Section, Lists (Chapter 13) 
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Button 


© Button - Mozilla Firefox 
Ele Edit View History Bookmarks Tools Help 


Button 


Search @ submit | Reset 


Message J-Submit J-Reset Change Me! Link 





HTML 


<h1>Button</h1> 


«form id="formi" method="post" action-"http://www.tipjar.com/cgi-bin/test"» 
<input type="text" id="search" name-"search" class="search" value="Search" /» 
<input type="submit" id-"submiti" name-"submiti" value="Submit" /> 
<input type="submit" id-"submit2" name-"submit3" value-"" /» 
<input type="submit" id="submit3" name-"submit2" class="button" value-"Submit" /» 
<input type-"reset" id="reset1" name="reset1" class="button" value-"Reset" /> 
</form> 
<input type="button" id-"message" name="message" class="button" value-"Message" /> 
<input type="button" id="submit4" name="submit4" class="button" value="J-Submit"/> 
<input type="button" id-"reset2" name="reset2" class="button" value-"J-Reset" /> 


«button id-"change" name-"change" class-"button"»Change Me!</button> 
«a id-"link" class="button" href="http://cssdesignpatterns.com">Link</a> 


CSS 


form ( margin:20px 0; } 
*.button { margin:0; padding:3px 10px; font-size:1em; color:black; 
cursor:pointer; background:url("gi.jpg") repeat-x left bottom; 
border-left:1px solid yellow; border-right:1px solid orange; 
border-top:1px solid yellow; border-bottom:1px solid orange; } 


*.button:hover, *.button.hover 
{ background:url("g2.jpg") repeat-x left top; 
border-left:1px solid orange; border-right:1px solid yellow; 
border-top:1px solid orange; border-bottom:1px solid yellow; } 


a.button { padding:5px 10px; line-height:2em; text-decoration:none; } 
#submit2 { width:32px; height:32px; border:none; cursor:pointer; 


background:url("go.jpg") no-repeat left top; } 
#submit2:hover, #submit2.hover ( background-position:1px 1px; } 


Button 


Problem 


Solution 


Pattern 


Location 


Styling 
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You want to use buttons to submit forms and run JavaScript. You want to style 
the buttons to fit the look and feel of the document. You want all actions to be 
accessible. 


You can use the «input type="submit">, «input type="reset">, <input 
type-"button"», «button», and «a» elements to create buttons. 


To submit form values to a server or to reset form elements to their initial 
values, you can use one or more «input type-"submit"» and «input 
type-"reset"» buttons inside a «form» element. These buttons are designed 
to be used inside forms. The text displayed in them comes from their value 
attribute. When a submit button is clicked, the text in its value attribute is 
submitted along with the rest of the form data. 


To trigger JavaScript events, you can use «input type-"button"» and «button» 
elements outside a form. The «button» element allows you to put any content 
(including images, inline elements, and block elements) inside the button. 
Whatever content you put in the button is displayed inside the button. In the 
example, you can click the Change Me! button and literally enter any valid 
HTML to change the content it displays. 


To trigger JavaScript events, you can use a link, «a». For example, when a user 
clicks an external link, you may want to ask the user whether he or she wants to 
submit the form before leaving the page. In the example, I styled the link to look 
like a button to make the point that links can look and function like buttons. 
From an accessibility point of view, it is better to use button elements for buttons 
rather than links, because a screen reader says "button" when it encounters a 
button and says "link" for a link. 


HTML 
«form id-"ID" method="post" action="URL"> 
<input type="submit" id-"NAME" name="NAME" value-"TEXT" /» 
«input type-"reset"  id-"NAME" name-"NAME" value-"TEXT" /» 
«/form» 





«input type-"button" id-"NAME" name-"NAME" value-"TEXT" /» 
«button id-"NAME" name-"NAME"» TEXT «/button» 
«a id-"NAME" href="URL"> TEXT </a> 


This pattern works anywhere inline elements work. 


You can apply styles to the various types of button elements to replace 
proprietary styles supplied by the browser, but your results may vary in different 
browsers and operating systems. The example embeds three submit buttons and 
one reset button in a form. The first submit button is left unstyled, which renders 
it as a button, but the exact look varies in different browsers and operating 
systems. The second submit button, #submit2, displays a background image. I 
removed all text in the value attribute to prevent it from being displayed over the 
image. When this button is clicked, the form data is submitted, but there is no 
button value to submit. This is only a problem when you have multiple submit 
buttons in a form and want to take different actions depending on which one 
was clicked. 


(Continued) 


408 





CHAPTER 17 ™ LAYOUTS 


Button (Continued) 


HTML Header 


«head» 

<!-- only script elements are shown --> 
" srcz"yahoo. js" »«/script» 
src="event.js"></script> 
src="chdp.js"></script> 
src="cssQuery-p.js"></script> 
src="page.js"></script> 


<script language="javascript" type="text/javascript 

<script language="javascript" type="text/javascript 

<script language="javascript" type="text/javascript 

<script language="javascript" type="text/javascript 

<script language="javascript" type="text/javascript 
</head> 


page.js 
function initPage() { 


assignEvent( 'submit','#formi', applyToThis, null, confirmIt, 'Are you sure?'); 
assignEvent( 'click', '#message', applyToThis, null, showIt, 'Hi There' ); 
assignEvent( 'click', '#button', applyToThis, null, showIt, 'Hi There' ); 
assignEvent( 'click', 'slink', applyToThis, null, confirmIt, 'Jump here?' ); 
assignEvent( 'click', '#change', applyToThis, null, changeIt, ‘Enter content:' ); 
assignEvent( 'click', '#submit4', applyToThis, null, submitForm, 'formi' ); 
assignEvent( 'click', '#reset2', applyToThis, null, resetForm, 'formi' ); 








assignEvent( 'mouseover', '*.button, #submit2', applyToThis, null, 
addClass, "hover" ); 

assignEvent( 'mouseout', '*.button, #submit2', applyToThis, null, 
removeClass, "hover" ); 


} 


function confirmIt(eElement, e, extraInfo) { return confirm(extraInfo); } 
function showIt (eElement, e, extraInfo) { alert(extraInfo); } 


function changeIt (eElement, e, extraInfo) { 
try{ var result = prompt(extraInfo, eElement.innerHTML); 
if (result) eElement.innerHTML = result; ) catch (ex) { return false; } 


} 


function submitForm(eElement, e, extraInfo) { 
document . getElementById(extraInfo).submit(); 


} 


function resetForm(eElement, e, extraInfo) { 
document .getElementById(extraInfo).reset(); 


} 


addEvent (window, 'unload' , purgeAllEvents) ; 
addEvent (window, 'load',initPage); 
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Button (Continued) 


Styling (continued) 


Limitations 


JavaScript 


Related to 
See also 


Ifurther styled the second submit button by removing its border and 
setting it to the exact height and width of its background image. When the 
button is hovered over, the #submit2:hover rule moves the background 
image down and right by 1 pixel to make it look like it is being depressed. 
The remaining buttons in the example are styled by the button class. 


Iuse the button class to normalize the display of all buttons by setting 
margin, padding, and font-size. This is important because browsers use 
different default values. I set the mouse pointer to cursor:pointer to 
further signal that the button is clickable. 


You can use any box styles to style a button. In the example, I set the 
background to a horizontally tiled gradient image that is lighter at the top 
and darker at the bottom to create a raised button effect. When the mouse 
hovers over the button, I change the background to a gradient image that 
is darker at the top and lighter at the bottom to create a depressed button 
effect. Likewise, I use lighter top-left borders and darker bottom-right 
borders when not hovered over and the reverse when hovered over. 


The «input type-"image"» submits the coordinates of where its image is 
clicked. I do not recommend using it to process coordinates because 

nonsighted users cannot see to click different areas of its image. A client- 
side image map is an accessible solution (see Image Map in Chapter 14). 





Because Internet Explorer 6 only responds to a:hover, I also use the .hover 
class and JavaScript to simulate :hover. Internet Explorer 7 and the other 
major browsers do not need this JavaScript workaround. 


If you omit the name attribute of a submit button, its value will not be 
submitted along with the rest of the form. For consistency, you can set 
a button's id attribute to the same value as its name attribute. 


The name and id attribute must not be the same name as a DOM element 
method because this prevents you from executing the method. For 
example, if you give a submit button a name or id of “submit”, you will not 
be able to execute document.getElementById("submit").submit(), which 
prevents you from submitting the form using JavaScript. The same applies 
to "reset". 


In the example, I use each button's unique ID to assign event handlers. For 
example, I assign the onclick event to the #change button so that it will run 
the changeIt() function when the button is clicked. changeIt() prompts 
the user for content that it then uses to replace the element's content. I 
also assign the onsubmit event to the #form1 form so that it will run the 
confirmIt() function prior to submitting the form. This function is called 
no matter which submit button is clicked. I also add event handlers to 

add and remove the hover class when the mouse mouses over button 
elements. 


This example shows how easy it is to extend the Event Styling framework 
with your own custom functions. 


Event Styling; Inline Elements (Chapter 2) 


www. cssdesignpatterns.com/button 
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Layout Links 


= 
7 Layout Links - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Layout Links 


Skip to main content 





header 


Home » Layout Links » Breadcrumbs « Previous | Next » 





body 
Main content goes here. External Link c 


» More Info 





footer ™ 
Last Updated on... Copyright © 2007 License 
Privacy Policy About Us Disclaimers 





HTML 


«hi»Layout Links</h1> 


«div id="preheader"><a class-"skiplink" href="#main">Skip to main content«/a»«/div» 
«div id="header"><h2>header</h2></div> 


«div id="postheader"> 

«div class="breadcrumbs"><a href="#">Home</a> » «a href="#">Layout Links«/a» 
» Breadcrumbs «span class-"sequential"» 
«a href="#">« Previous«/a» | «a href="#">Next »</a></span></div></div> 


«div id="body"><h2>body</h2> 
«p»Main content goes here. «a class-"outlink" href="#">External Link«/a»«/p» 
«p class-"morelink"»«a href="#">» More Info </a></p></div> 


«div id="footer"><h2>footer «a class-"toplink" href="#">Top*</a></h2> 
<ul><li>Last Updated on... </li> <li><a href="#">Copyright &copy; 2007«/a»«/li» 
<li><a href="#">License</a> </li> <li><a href="#">Privacy Policy</a></li> 
<li><a href="#">About Us«/a»«/li» <li><a href="#">Disclaimers</a></1i></ul> 
<div class="float-divider"></div></div> 


CSS 


a:link, a:visited, a:active { text-decoration:none; color:maroon; } 
a:hover { color:black; text-decoration:underline; } 


*.morelink ( font-size:0.8em; font-weight:bold; text-align:right; } 

*.toplink ( font-size:0.7em; font-weight:normal; vertical-align:top; } 

*.outlink ( padding-right:15px; font-style:italic; 
background:url("external.gif") no-repeat top right; } 


/* Nonessential rules are not shown. */ 
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Layout Links 


Problem 


Solutions 


Pattern 


Related to 
Location 
See also 


You want to enhance navigation within a document and to other documents 
using specially styled links including skip-to-main-content, breadcrumb, 
sequential, more-info, top, external, and footer links. 


Section links allow you to link to any section in a document. You can assign each 
section to a unique ID. The ID is an anchor that can be linked to by internal and 
external links. Using the section ID as a selector, you can uniquely style the 
section and its elements. There are five common sections: preheader, header, 
postheader, body, and footer. (The terms preheader and postheader are my 
own.) Different types of links occur in each of these sections. 


Skip-to-main-content links allow users to jump directly to the main content of 
a document. This link is useful for nonsighted users and users reading the 
document on small devices. It occurs in the preheader and should be the first 
item in the document other than perhaps the document heading. 


Breadcrumb links are a series of links that lead back to the home page. They 
typically occur in the postheader or header. To identify them as breadcrumbs, 
you can separate them with a right-pointing arrow symbol. 


Sequential links link to previous and next documents in a series. They typically 
have names like "previous" and "next," the former often preceded by a left- 
pointing arrow and the latter followed by a right-pointing arrow. 


More-info links allow content in a section to be abbreviated to make it easier to 
read online. If users want more information, they can click a link to read more 
about it. The link is often labeled some variation of "more info." You can visually 
set apart more-info links by making them the last item in a section, embedding 
them in their own paragraph, aligning them to the right, and preceding them 
with a right-pointing arrow symbol. 


Top links allow users to jump to the top of a section or document. They typically 
occur in the header of a section when they link back to the top of the document. 
They also occur as the last item in a section when they link back to the top of the 
section. They are often raised above the baseline and are followed by an up- 
pointing arrow symbol. 


External links are styled to show that they lead to an external web site. This 
helps users decide whether or not they want to go to another web site. You can 
create a rule that adds right padding to a link and displays a background image 
of an up-right-pointing arrow in this padding. 


Footer links occur in the footer section and link to information about the 
copyright, licensing, privacy, company, disclaimers, affiliates, and so forth. 


HTML 
«a class-"LINK TYPE" href="URL#SECTION ID"» LINK CONTENT </a> 


CSS 
*.LINK TYPE ( STYLES j 


Inline Elements (Chapter 2); Lists (Chapter 13) 
This pattern works anywhere. 


www.cssdesignpatterns.com/layout-links 
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Layout Example 


== 
J Layout Example - Mozilla Firefox 

Ele Edit View History Bookmarks Tools Help 
Skip to main content 


Search: 


Layout Example 


Preheader message 


Search 





Menui Menu2 Search message 


Home » Layouts » Layout Example 
Site Map Product 1 Product 2 Product 3 


cssDesignPatterns Product 1 Content 

apress.com This is the message of tab 1. More message... I 
» More Links added more to this message to show how the 

tab automatically displays scrollbars when it 

Links exceeds the height and/or width of the tab 

- Linki container. Most of this text is not shown in the 

- Link2 book to save room in the example. Note that 

- Link3 Internet Explorer 6 has a bug that requires you 

- Link4 to fix the width of this content. Also note that 

you add margins, border, and padding to the 


» More Products nuteidain how rather than tha tah co that the S 


cssDesignPatterns.com | apress.com 
Copyright © 2007 Michael Bowers All rights reserved. 


HTML Structural Elements 


<div id="preheader"></div> 
<div id="header"> 
«div id="title"><h1>Layout Example</h1></div> 
<div id="search"><h3>Search:</h3></div></div> 
<div id="postheader"></div> 
<div id="body"> 
<div id="nav"> 
<div id="site-map"><h3>Site Map</h3></div> 
«div id="links"><h3>Links</h3></div></div> 
<div id="main"></div> 
<div id="extras"> 
<div id="news"><h3>News</h3></div> 


* Previous | Next » 


News 

Content: This is a good 
place for press releases 
and news. 


» More News 


About us 
Content: This is a good 
place for company 
information. 

» More About Us 





«div id="about-us"><h3>About us</h3></div></div></div> 


<div id="footer"></div> 


CSS Structural Styles 


#preheader *.parti { float:left; margin-left:10px; } 
#preheader *.part2 { float:right; margin-right:10px; } 


#header { float:left; width:100%; } 


#title { float:left; width:50%; margin-top:7px; } 


#search { float:right; margin-top:2px; } 


#postheader *.breadcrumbs { float:left; margin-left:10px; } 
#postheader *.sequential { float:right; margin-right:10px; } 


#body { float:left; width:100%; } 
#nav { float:left; width:25%; min-width:160px; } 


"main ( float:left; width:50%; min-width:300px; } 
#extras { float:left; width:25%; min-width:160px; } 


#footer { clear:both; padding-top:40px; } 
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Layout Example 


Example 


This example combines the design patterns in this chapter. It shows how these 
design patterns can be nested and combined to create an unlimited variety of 
layouts. 


There are five layout rows in the example corresponding to five typical sections: 
preheader, header, postheader, body, and footer. I created these sections using 
the Fluid Layout design pattern. This makes each section modular so its layout 
can be easily reorganized with confidence when floated or positioned. 


The preheader section uses the Opposing Floats design pattern to move the 
skip-to-main-content link and the preheader message to opposite sides of the 
document. Placing information on opposite sides puts put more information in 
half the vertical space without overwhelming the reader. A user automatically 
separates content aligned to the left from content aligned to the right. Being 
floated allows the position of the breadcrumbs and preheader message to be 
adjusted automatically and dynamically to different viewport widths and zoom 
factors. 


The header section contains two subsections: title and search, which are also 
floated to opposite sides using the Opposing Floats design pattern. This keeps 
the search section aligned to the right. The search button is styled with a custom 
background image using the Button design pattern. 


The title section contains a heading and two flyout menus. A float divider moves 
the menus below the heading. You can create each menu using the Flyout Menu 
design pattern. You can stack together and nest as many menus as you like by 
adding more unordered lists and list items to the document. A float divider 
occurs before the end of the header to expand the section around its floated 
children—as specified in the Fluid Layout design pattern. 





The postheader section (like the preheader and header) floats breadcrumbs and 
sequential links to opposite sides. This organizes the entire heading area into 
three rows and two columns aligned to opposite sides. 


The body section contains three subsections: nav, main, and extras. Each is 
floated left using the Fluid Layout design pattern. This divides the body section 
into three columns. 


The main section contains three tabs created using the Tabs design pattern. 

By using tabs, you can put more information in a smaller space. This is called 
information hiding. It hides information in the page and displays it as needed. 
Since the information is downloaded with the page, it can be displayed without 
having to fetch another page from the server. 


The nav and extra sections each contain two subsections, which are rendered in 
normal flow. I applied the Rollup design pattern to them so that they will roll up 
and down when you click their headings. Each of these sections also contains a 
more-info link. These are all additional information hiding techniques. 


The footer section contains standard footer links. 


(Continued) 
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Layout Example (Continued) 


' y Layout Example - Opera BAE 


File Edit View Bookmarks Widgets Tools Help File Edit View Bookmarks Widgets Tools Help 
Skip to main content 


‘| | Layout Example - Opera 


Preheader message ^ 





Layout Example 


Menu 1 Menu 2 
Search: 


| Search 


Home » Layouts » Layout Example « Previous | Next » 


Search message 


Site Map 


cssDesignPatterns 
apress.com 


» More Links 


Links 


- Linki 
- Link2 
- Link3 
- Link4 
» More Products 


Product 1 Product2 Product 3 


Product 1 Content 

This is the message of tab 1. More 
message... I added more to this 
message to show how the tab 
automatically displays scrollbars when 
it exceeds the height and/or width of 
the tab container. Most of this text is — 
not shown in the book to save room 
in the example. Note that Internet 
Explorer 6 has a bug that requires 
vou to fix the width of this content. 


News ry 


About us 


Content: This is a 
good place for 
company 
information. 

» More About Us 


cssDesignPatterns.com | apress.com 
Copyright © 2007 Michael Bowers All rights 
reserved. 


Figure 17-1. Layout example displayed in a narrow viewport and displayed without a stylesheet 


Skip to main content 


Preheader message 


Layout Example 


Menu 1 


menu item 
menu item 
menu item 
menu item 


Menu 2 


menu item 
menu item 
menu item 
menu item 


Search: 


Search message 
Home » Layouts » Layout Example 


« Previous | Next » 
Navigation 
Site Map 

e cssDesignPatterns 


. ess.com 


» More Links 
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Layout Example (Continued) 


Related to 


See also 


This example demonstrates how layout design patterns are modular, reusable, 
customizable, fluid, interactive, and accessible. 


These layouts are modular and reusable. This example is created entirely using 
layout design patterns. I copied each design patterns HTML structure into 
example.html and changed its content as desired. For each instance of the design 
pattern, I repeated this process. I then copied and pasted the CSS rules for each 
design pattern into page.css, and copied and pasted the JavaScript for each 
design pattern into page. js. The CSS styles and JavaScript code of a design 
pattern only need to be copied once into a page's stylesheet and script. For 
maximum reusability, you can place all layout design patterns in a site's 
stylesheet and script file to make them available to all pages. This works because 
HTML, CSS, and JavaScript are located in separate files, which makes them more 
reusable and interchangeable. On the other hand, for maximum performance, 
you may want to include only those styles and JavaScript that apply to the 
current page. 


These layouts are customizable. If you want to tweak the styles of a design 
pattern for all instances of the pattern, you can directly change the pattern's 
rules. If you want to tweak the styles of a design pattern for a specific section, 
you can copy the rule and prefix the copied selector with a section selector. For 
example, if you want to change what a selected tab looks like in the nav section, 
you can copy the selector, ul.tabs li.selected *.tab-label, and create a new 
one prefixed with #nav, as in#nav ul.tabs li.selected *.tab-label. Because 
selectors containing an ID override those that do not, this selector overrides the 
standard selector. If you want to change just one instance of a design pattern, 
you can wrap it in a division set to a unique ID, copy the desired rule, and prefix 
its selector with the unique ID. 





These layouts are fluid. They adapt nicely to devices with different widths and 
zoom factors. Figure 17-1 shows the same page rendered in a narrow viewport. 
Notice how side-by-side columns automatically reflow into a single column to 
fit the viewport. This allows the page to work well on handheld devices. 
Furthermore, if a browser does not support stylesheets, each section renders 
as nicely structured HTML (see Figure 17-1). 


These layouts are interactive, allowing a user to collapse and expand sections, 
drop-down menus, and select tabs. Notice in Figure 17-1 how the News section is 
rolled up, which makes room to show other sections. 


These layouts are accessible. Interactive elements such as rollups and drop- 
down menus play nicely with screen readers because content is never set to 
visibility:hidden or display:none; instead, hidden content is positioned 
offscreen and moved onscreen when it is made visible. Because all content is 
present in the document, search engines can index it. For browsers that do not 
support JavaScript or have disabled JavaScript, you should include an alternative 
version that does not rely on JavaScript. 


All design patterns in this chapter and the majority of design patterns in 
the book 


Www. Ccssdesignpatterns.com/layout-example 


CHAPTER 18 


Drop Caps 


This chapter discusses design patterns that create drop caps. A drop cap dramatically styles 
the first letter of a document to signal that it is the beginning of a document. Sometimes it is 
used at the beginning of a major section of a longer document. Sometimes it styles a word 
instead of just the first letter. 
Typically, the drop cap enlarges the first letter and lowers it so that the top of the letter is 
aligned to the top of the following text, but there is no limit to how the drop cap can be styled. 
The design patterns in this chapter are organized from simplest to most complex. 


Chapter Outline 


Aligned Drop Cap shows how to create a simple drop cap by enlarging it and vertically 
aligning it. 


First-letter Drop Cap shows how to create a drop cap without inserting extra markup. 
Hanging Drop Cap shows how to use a hanging indent to create a drop cap. 


Padded Graphical Drop Cap shows how to add left padding to the drop cap to make 
room for a background image showing a banner, a grabber, or a decoration. 


Floating Drop Cap shows how to float the drop cap to the left so that text below the 
drop cap wraps back under the drop cap. 


Floating Graphical Drop Cap shows how to display a graphic on top of the dropcap 
text. It works great for screen readers, and it shows a styled text version of the drop cap 
when the image is unavailable. This is the best Graphical Drop Cap design pattern for 
allowing text below the drop cap to wrap back under the drop cap. 


Marginal Drop Cap shows how to use absolute positioning to move the drop cap into 
the left margin of a block. All lines of the block are indented. 


Marginal Graphical Drop Cap shows how to display a graphic on top of the dropcap 
text. It works great for screen readers, and it shows a styled text version of the drop cap 
when the image is unavailable. This is the best Graphical Drop Cap design pattern for 
preventing text below the drop cap from wrapping back under the drop cap. 
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CHAPTER 18 = DROP CAPS 


Aligned D 


rop Cap 


© Aligned Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Aligned 
A iignea Dro 


Drop Cap 


p Cap Variation 1. Text is large, bold, and aligned at the 


baseline. Subsequent lines are not indented. 


A oec Drop Cap Variation 2. The drop cap is aligned to the middle of the 


text. Subsequ 
second line a little bit. 


ent lines are not indented. The drop cap pushes down the 


ligned Drop Cap Variation 3. The drop cap is offset to the top of the text. 


Subsequent lines are not indented. The drop cap pushes down the second line 


quite a bit. 


HTML 


«p»«span class-" 
large, bold, a 


«p»«span class-" 
drop cap is al 
The drop cap p 


«p»«span class-" 
drop cap is of 
The drop cap p 


CSS 


*.aligned-dropca 
vertical-align 


*.aligned-dropca 
vertical-align 





*.aligned-dropca 
font-style:ita 
background-col 
padding:O 4px; 





aligned-dropcapi"»A«/span»ligned Drop Cap Variation 1. Text is 
nd aligned at the baseline. Subsequent lines are not indented.«/p» 


aligned-dropcap2"»A«/span»ligned Drop Cap Variation 2. The 
igned to the middle of the text. Subsequent lines are not indented. 
ushes down the second line a little bit.«/p» 


aligned-dropcap3"»A«/span»ligned Drop Cap Variation 3. The 
fset to the top of the text. Subsequent lines are not indented. 
ushes down the second line quite a bit.«/p» 


pi ( font-size:40px; line-height:normal; font-weight:bold; 
:baseline; } 


p2 ( font-size:40px; line-height:0.8em; font-weight:bold; 
:middle; background-color:gold; padding:0 2px; } 





p3 ( font-size:40px; line-height:normal; font-weight:bold; 
lic; vertical-align:-0.45em; color:white; 

or:black; background-image:url("marble. jpg"); 

border:1px solid black; } 
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Aligned Drop Cap 


Problem 


Solution 


Pattern 


Location 


Limitations 


Related to 


See also 


You want to display the first letter of a block as a drop cap. An aligned drop cap is 
a letter that has a larger font size than the following text. Its baseline is typically 
dropped lower than the baseline of the following text. It may also be styled with a 
different font, weight, case, and so on. 


In general terms, you want to style a section of text and align it to other text. 


You can mark up the first letter or letters of a terminal block element using an 
inline element. Assigning this element to a class, such as "aligned-dropcap", 
makes it easy to style. You can use font-size to increase the height of the text. 
You can use a negative value in vertical-align to lower the text below the 
baseline. You can use a positive value in vertical-align to raise the text above 
the baseline. You can use line-height to fine-tune how all this affects the height 
of the line. You can use line-height: normal to ensure the drop cap does not 
overlap neighboring lines. You can use a value slightly smaller than 1em in 
line-height to tighten up the space between the lines. 


HTML 
<INLINE class="aligned-dropcap"> CONTENT </INLINE> 


CSS 

*.aligned-dropcap { vertical-align:+VALUE; 
font-size:+VALUE; 
line-height:VALUE; } 


This pattern works anywhere you can use an inline element. 


Using text with different fonts and font sizes increases the height of a line. 
Furthermore, offset text increases the height of a line. Thus, an aligned drop 
cap puts extra space between the first and second lines. The lower you place 
the drop cap, the more space you put between the lines. 


Hanging Drop Cap, Floating Drop Cap; Vertical-aligned Content, Vertical-offset 
Content (Chapter 12); Font (Chapter 10); Spacing (Chapter 11) 


Www. Ccssdesignpatterns.com/aligned-drop-cap 
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First-letter Drop Cap 


© First-letter Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


First-letter Drop Cap 


T. can create an aligned drop cap. The problem is that 
browsers have a hard time aligning pseudo elements. 


f irst-letter can be used to create a floating drop cap. The problem is 
that the drop cap cannot be positioned up or down. 


i E Birst-letter can be used to create a hanging drop cap in the 
eg margin. The drop cap can even be replaced by a background 
MOT image. The problem is that the drop cap cannot be positioned up 


or down. 





HTML 


«p class-"dropcapi"»«code»first-letter«/code» can create an aligned drop cap. 
The problem is that browsers have a hard time aligning pseudo elements.«/p» 
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<p class="dropcap2"><code>first-letter</code> can be used to create a floating 
drop cap. The problem is that the drop cap cannot be positioned up or down.</p> 


<p class="dropcap3">first-letter can be used to create a hanging drop cap in the 
margin. The drop cap can even be replaced by a background image. 
The problem is that the drop cap cannot be positioned up or down.</p> 





CSS 
*.dropcapi:first-letter { font-size:60px; vertical-align:Opx; font-weight:bold; } 
*.dropcap2:first-letter ( float:left; margin-left:-3px; margin-right:3px; 


position:relative; top:-2000px; /* DOES NOT WORK */ 
font-size:60px; line-height:normal; font-weight:bold; } 


*.dropcap3 (1 padding-left:105px; text-indent:-104px; margin-top:50px; } 
*.dropcap3:first-letter { padding:40px 50px; font-size:1px; line-height:1px; 


color:white; background-image:url("f.jpg"); 
background-position:center center; } 
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First-letter Drop Cap 


Problem 


Solution 


Pattern 


Location 


Limitations 


Related to 
See also 


You want to display the first letter of a block as a drop cap without adding 
elements to the HTML document. 


In general terms, you want to style the first letter of a terminal block element, 
such as a paragraph. 


first-letter is a design pattern built into the CSS language. first-letter is 
called a pseudo-element selector because it selects a subset of content in an 
element rather than all the content in an element. 


You can tag a terminal block element with a class or ID of your choosing. You can 
combine the first-line pseudo selector with classes, IDs, and types of your 
choosing. Make sure the first-line selector is the last item in the selector. 


CSS 

*.CLASS:first-letter { STYLES } 
or 

#ID: first-letter { STYLES } 
or 


ELEMENT: first-letter { STYLES } 


first- letter works just like first-line. It only works on terminal block 
elements. It does not work on structural block elements or inline elements. 
first-letter is not inherited by child elements. 


The first-letter selector works best with font and text properties. Browsers 
cannot position pseudo-elements and have trouble aligning them. This means 
you may not be able to control the vertical placement of the drop cap. Notice 
that the second drop cap in the example has been relatively positioned and 
offset 2000 pixels. This should move the drop cap off the screen, but as the 
example demonstrates, the text selected by first- letter does not respond to 
positioning. 


Browsers also have exceptional cases where they may not select the first letter or 
may select more than the first letter. For example, Opera 9 does not select the 
first letter of table cells, and in a list item Internet Explorer 7 selects the list 
marker along with the first letter. No major browser selects the first letter when 
an image or object precedes it. first-letter brings out bugs in browsers. 


Internet Explorer 6 positions a first-letter background image differently from 
Internet Explorer 7, and both position it differently from the other major 
browsers. As shown in the source code for the example, you can solve this 
problem by loading different stylesheets for Internet Explorer versions 6 and 7 
and using background-position to adjust the position of the background. 


Pseudo-element Selectors (Chapter 3) 


WwWw.Ccssdesignpatterns.com/first-letter-drop-cap 
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Hanging Drop Cap 


©) Hanging Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Hanging Drop Cap 


anging Drop Cap. This drop cap hangs in the margin. No text flows back 
under the backdrop when it flows past the bottom of the drop cap. The 
drop cap can be lowered and raised without affecting the line height. 
Using top and left, you can adjust the position of the drop cap and the 
position of the text next to the drop cap. 





HTML 


<p class="hanging-indent"><span class="hanging-dropcap">H</span>anging 
Drop Cap. This drop cap hangs in the margin. No text flows back under 
the backdrop when it flows past the bottom of the drop cap. 
The drop cap can be lowered and raised without affecting the line height. 
Using <code>top</code> and <code>left</code>, 
you can adjust the position of the drop cap and the position of the text 
next to the drop cap.</p> 
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CSS 


*.hanging-indent { padding-left:50px; 
text-indent:-50px; 
margin-top:-25px; } 





*.hanging-dropcap { position:relative; 
top:0.55em; 
left:-3px; 
font-size:60px; 
line-height:60px; 
font-weight:bold; 


Ww 
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Hanging Drop Cap 


Problem 


Solution 


Pattern 


Location 


Limitations 


Variations 


Related to 


See also 


You want to display the first letter of a block as a drop cap without increasing the 
height of the first line. You also want to position the drop cap higher or lower and 
control its distance from neighboring text. You also want all text in all lines ina 
block element to stay to the right of the drop cap. 


In general terms, you want to move text or an image to the left and to move text 
to the right while controlling the position of both. 


Mark up the first letter or letters of a terminal block element using an inline 
element assigned to the "hanging-dropcap" class. Also tag the terminal block 
element with the "hanging- indent" class. 


Style the "hanging-dropcap" class as follows: 

- Use position: relative to prepare the drop cap for positioning. 

- Use top to move the drop cap up or down. 

- Assign a negative value to left to put space between drop cap and text. 


- Assign line-height to the same value as font-size to prevent the large 
font-size of the drop cap from expanding the height of the first line. 


Style the "hanging- indent" class as follows: 


- Assign a positive value to padding-left to move text to the right of the drop cap. 
The value should be larger than the width of the drop cap. 


- Assign a negative value to text-indent to move the drop cap to the left of the 
text. The value should be equal to or less than the width of the drop cap. 


- Assign a positive value to margin-top to make room for a drop cap that extends 
above the line, or a negative value when a drop cap is lowered. 


HTML 
«BLOCK class-"hanging-indent"» 

«INLINE class-"hanging-dropcap"» TEXT </INLINE> 
«/BLOCK» 


CSS 

*.hanging-indent { padding-left:+VALUE; 
text-indent:-VALUE; 
margin-top:+VALUE; } 


*.hanging-dropcap { position:relative; 
top:+VALUE; left:-VALUE; 
font-size:+SIZE; line-height:+SIZE; } 


The drop cap must be the first item in a terminal block element. 


Internet Explorer 6 and Opera 9 position background images differently behind 
text that has been moved using text-indent. For this reason, a graphical hanging 
drop cap is unfeasible. 


You can style the "hanging-dropcap" class using properties such as font, color, 
background-color, background-image, padding, border, and so forth. 


Aligned Drop Cap, Floating Drop Cap; Margin, Padding (Chapter 6); Relative 
(Chapter 7); Offset Relative (Chapter 8); Font (Chapter 10); Spacing (Chapter 11) 


www. cssdesignpatterns .com/hanging-drop-cap 
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Padded Graphical Drop Cap 


Padded Graphical Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Padded Graphical Drop Cap 


Va) 
SA XL dded Aligned Graphical Drop Cap. 
m» N J ag P: ed Aligned Graphical Drop Cap 


Text is large, bold, and aligned at the baseline. Subsequent lines are not 
indented. 


and then offset to the right using 

padding-left. It has a background 
image rendered in the padding area. Subsequent lines are indented for as 
long as the drop cap is on their left. 


^" Beck added Floating Graphical Drop Cap. 
Ed 2 974 J The drop cap is floated to the left 





HTML 
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<h1>Padded Drop Cap</h1> 


<p><span class="padded-dropcap1">P</span>added Aligned Drop Cap. Text is 
large, bold, and aligned at the baseline. Subsequent lines are not indented.</p> 





<p><span class="padded-dropcap2">P</span>added Floating Drop Cap. The 
drop cap is floated to the left and then offset to the right using 
<code>padding-left</code>. It has a background image rendered in the 
padding area. Subsequent lines are indented for as long as the drop cap is on 
their left.</p> 


CSS 


*.padded-dropcapi ( padding-left:39%; font-size:80px; line-height:normal; 
font-weight:bold; vertical-align:middle; 
background:url("rose.jpg") no-repeat -65px O white; ] 


*.padded-dropcap2 { padding-left:275px; padding-right:10px; float:left; 
position:relative; top:-0.25em; margin-bottom:-0.2em; 
margin-left:-3px; margin-right:3px; color:black; 
background:url("grabber.jpg") no-repeat 5px 20px white; 
font-size:84px; line-height:normal; font-weight:bold; } 
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Padded Graphical Drop Cap 


Problem You want to indent or center a drop cap and style its background from the 
beginning of the line through the drop cap. Behind the padding, you want to put 
a background image, such as a banner, an ad, or a grabber, to draw the reader 
into the text. 


In general terms, you want to pad the starting position of an inline element. 


Solution A padded drop cap is indented using padding. You can use padding to center a 
drop cap or to indent it by a fixed amount. The background color or background 
image shows through the padding. 


To create a padded drop cap, you can mark up the first letter or letters of a 
terminal block element using an inline element. Assigning this element to a 
class, such as "padded-dropcap", makes it easy to style. You can use padding-left 
to move the drop cap to the right. You can center the drop cap by using a value 
for padding-left that is slightly less than 50%. Lower the percentage as needed 
to compensate for the width of the content in the drop cap. You can use 
margin-left to put transparent space on the left of the drop cap. You can use 
padding-right to put padding between the drop cap and the following text. You 
can also use margin-right to put transparent space between the drop cap and 
the following text. 


Pattern HTML 
<INLINE class="padded-dropcap"> CONTENT </INLINE> 
CSS 
*.padded-dropcap { padding-left:+VALUE; 
padding-right :+VALUE; E: 
margin-left:+VALUE ; EZ 
margin-right:+VALUE; Pu 
background:url("FILE.EXT") REPEAT HORIZONTAL VERTICAL COLOR; } e 
Location This pattern works anywhere you can use an inline element. 
Limitations If you are centering the drop cap and the width of the drop caps parent is 


variable, the position of the drop cap will be close to center, but may not always 
remain perfectly centered as the parent's width changes. If you need it to be 
precisely centered, you need to set the width of the drop cap's parent to a fixed 
value. 





As you extend the padding on the left, you extend the background on the left. 
This is part of the design of this type of drop cap. If you have a background 
behind the drop cap, but you do not want to show the background on the left, 
you can use margin-left instead of padding-left to indent the drop cap. 


Tip You can combine this pattern with other Drop Cap design patterns. 


Related to Aligned Drop Cap, First-letter Drop Cap, Hanging Drop Cap, Floating Graphical 
Drop Cap; Margin, Padding, Background (Chapter 6) 


See also WWw.Ccssdesignpatterns.com/padded-graphical-drop-cap 


[^e] 
= 
oO 
Q- 
=] 
a 
a 





426 


CHAPTER 18 — DROP CAPS 


Floating Drop Cap 


© Floating Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Floating Drop Cap 
the height of the line. Using top, margin-left, margin-right, and 


margin-bottom, you can adjust the position of the drop cap and the 
position of the text next to the drop cap. 


F loating Drop Cap Variation 1. This drop cap is lowered without affecting 


floating Drop Cap Variation 2. Notice how the drop cap has been 
moved up and to the right, and the text has moved to the right. 





HTML 


<h1>Floating Drop Cap«/hi» 

<p><span class="floating-dropcap1">F</span>loated Drop Cap Variation 1. This 
drop cap is lowered without affecting the height of the line. 
Using <code>top</code>, «code»margin-left«/code», <code>margin-right</code>, 
and «code»margin-bottom«/code», you can adjust the position of the drop cap 
and the position of the text next to the drop cap.«/p» 

«br /» 

<p><span class="floating-dropcap2">F</span>loated Drop Cap Variation 2. 
Notice how the drop cap has been moved up and to the right, and the text 
has moved to the right.«/p» 


CSS 


*.floating-dropcapi ( float:left; position:relative; top:-0.25em; 
margin-left:-3px; margin-right:3px; margin-bottom:-0.6em; 
font-size:80px; line-height:normal; font-weight:bold; } 


*.floating-dropcap2 ( float:left; position:relative; top:-0.35em; 
margin-left:20px; margin-right:5px; margin-bottom:-0.7em; 
font-size:80px; line-height:normal; font-weight:bold; 
color:white; background-color:black; padding:0 20px; 
background-image:url("marble. jpg"); 
border-left:2px groove black; border-right:2px ridge black; 
border-top:2px groove black; border-bottom:2px ridge black; } 
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Floating Drop Cap 


Problem 


Solution 


Pattern 


Location 


Limitations 


Advantages 


Tips 


Related to 


See also 


You want to display the first letter of a block as a drop cap without increasing the 
height of the first line. You also need to position the drop cap higher or lower and 
control its distance from neighboring text. 


In general, you can float a drop cap to the left and use margins and relative 
positioning to fine-tune its position. Specifically, you can mark up the first letter 
or letters of a terminal block element using an inline element. Assigning this 
element to a class, such as "floating-dropcap", makes it easy to style. You can 
use float: left to float the drop cap to the left. You can use position: relative to 
prepare the drop cap for positioning. You can use top to move the drop cap up or 
down—negative values move it up, and positive values move it down. You can 
use margin-left to move the drop cap left or right—negative values move it to 
the left, and positive values move it to the right. You can use margin-right to 
change the space between the drop cap and text—positive values increase the 
space, and negative values shrink it. You can use margin-bottom to extend or 
shrink the transparent area below the drop cap. By using positive values in 
margin-bottom, you can extend down the influence of the float so that text 
continues to indent on its right. 


HTML 
<INLINE class="floating-dropcap"> TEXT </INLINE> 
CSS 
*.floating-dropcap ( float:left; 
position:relative; 
top:+VALUE ; 
margin-left:+VALUE; 
margin-right:*VALUE; 
margin-bottom:+VALUE; } 


This pattern works anywhere you can use an inline element. 


If other elements in the same line are also floated left, they will be stacked 
between the drop cap and the text. This breaks the dropcap effect. Floats 
sometimes trigger bugs in browsers. 


The floating drop cap is simple to position, and is one of the most flexible to 
position and style. It allows text to wrap around the bottom of the float, which 
is the most common dropcap style. 


To compensate for the extra empty space that occurs on the left of large 
fonts, you can shift the drop cap to the left by assigning a negative value to 
margin-left. 


To compensate for the extra empty space below a drop cap that is created by a 
negative value in top, you can assign a negative value to margin-bottom. 


Floating Graphical Drop Cap; Margin (Chapter 6); Relative, Float and Clear 
(Chapter 7); Offset Float, Offset Relative (Chapter 8) 


www.cssdesignpatterns.com/floating-drop-cap 
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Floating Graphical Drop Cap 


© Floating Graphical Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Floating Graphical Drop Cap 


loating Graphical Drop Cap. The letter F has been 


text and visual users see the image. If the browser 

cannot display the dropcap image, the text becomes 

visible. The text can be styled so that it looks good if it 
ever becomes visible. Because the drop cap is floated, the text wraps around 
the bottom of the drop cap when it clears the drop cap's bottom margin. 


Ye covered by the dropcap image. Screen readers read the 
e 





HTML 


<h1>Floating Graphical Drop Cap</h1> 


<p><span class="floating-dropcap">F<span></span></span>loating 
Graphical Drop Cap. The letter F has been covered by the dropcap image. 
Screen readers read the text and visual users see the image. 
If the browser cannot display the dropcap image, the text becomes visible. 
The text can be styled so that it looks good if it ever becomes visible. 
Because the drop cap is floated, the text wraps around the bottom of the drop cap 
when it clears the drop cap's bottom margin.</p> 
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CSS 





*.floating-dropcap { float:left; position:relative; top:5px; 
margin-left:80px; margin-right:12px; margin-bottom: 0px; 
width: 100px; height :90px; 
line-height:80px; text-align: right; 
font-size:100px; font-weight:bold; 
color:black; background-color:white; } 


*.floating-dropcap span { position: absolute; 
width:100px; height:90px; left:0; top:0; margin:0; 
background-image:url("f. jpg"); 
background-repeat:no-repeat; } 
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Floating Graphical Drop Cap 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Related to 


See also 


You want to create a floating drop cap where the dropcap text is replaced by a 
graphic. 


Combine the Floating Drop Cap pattern with the Text Replacement pattern. 


To use the Floating Drop Cap design pattern, tag the dropcap text in a 
terminal block element with an inline element assigned to the "floating- 
dropcap" class. Position the drop cap using float:left, position:relative, 
top, margin-left, margin-right, and margin-bottom. See Floating Drop Cap 
for details. 


To add in the Text Replacement design pattern, you can use width and height 
to size the float to the exact size of the dropcap image. You can also embed an 
empty span inside the float and use background-image to display the dropcap 
image as its background. You can style the embedded span to cover the text 
in the dropcap span using position:absolute, left:0, top:0, and margin:0. 
See Text Replacement in Chapter 10 for details. 


HTML 
«INLINE class-"floating-dropcap"» TEXT </INLINE> 
CSS 
*.floating-dropcap ( float:left; 
position:relative; top:-VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
margin-bottom: +VALUE ; 
width:IMAGE WIDTH; height:IMAGE HEIGHT; } 


*.floating-dropcap span ( position:absolute; 
width:IMAGE WIDTH; height:IMAGE HEIGHT; 
left:0; top:0; margin:0; 
background-image:url("FILE.EXT"); 
background-repeat:no-repeat; ] 


This pattern works anywhere you can use an inline element. 


The graphical floating drop cap is simple to position. It degrades gracefully 
when the graphic cannot be displayed because the dropcap text is displayed 
in its place. You can style the dropcap text so that it looks good whenever the 
browser cannot display the background image. Lastly, screen readers can read 
the dropcap text without any problem, while sighted users see the image in its 
place. A border around the terminal block containing the drop cap includes 
the drop cap. 


It has the disadvantages of a float, such as triggering browser bugs and 
interacting with other floats. 


Padded Graphical Drop Cap, Floating Drop Cap, Marginal Graphical Drop 
Cap; Width, Height, Sized (Chapter 5); Margin, Background (Chapter 6); 
Positioned, Closest Positioned Ancestor, Absolute, Relative, Float and Clear 
(Chapter 7); Offset Float, Offset Relative, Aligned and Offset Absolute 
(Chapter 8); Text Replacement (Chapter 10) 


www. cssdesignpatterns.com/floating-graphical-drop-cap 
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Marginal Drop Cap 


© Marginal Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Marginal Drop Cap 


and uses absolute positioning to move the drop cap into the margin 
created by the indent. All text stays to the right of the drop cap. In 
other words, text does not wrap back under the drop cap when it 
extends below the drop cap. 


M arginal Drop Cap. The marginal drop cap indents the text to the right 





HTML 


«hi»Marginal Drop Cap</h1> 


«p class-"indent"»«span class-"marginal-dropcap"»M«/span»arginal Drop Cap. 
The marginal drop cap indents the text to the right and uses absolute 
positioning to move the drop cap into the margin created by the indent. All 
text stays to the right of the drop cap. In other words, text does not wrap 
back under the drop cap when it extends below the drop cap.«/p» 


CSS 
*.indent ( position:relative; margin-left:72px; margin-top:20px; ) 
*.marginal-dropcap ( position:absolute; left:-77px; top:-16px; 


font-size:80px; font-weight:bold; 
color:black; background-color:white; } 
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Marginal Drop Cap 


Problem You want to display the first letter of a block as a drop cap in the block's 
margin. You do not want the text to wrap back under the drop cap when it 
flows below the drop cap. 


Solution Use the Indented design pattern (Chapter 8) to create a left margin in the 
block and use absolute positioning to move the drop cap into the left margin. 
Use margin-left to indent the block element to make room for the drop cap 
in the left margin. Optionally, use margin-top:+VALUE to insert additional 
space above the block to make room for the drop cap. Assign position: 
relative, position: absolute, or position: fixed to the block so that the drop 
cap can be absolutely positioned relative to it. Tag the dropcap text with a 
span assigned to the marginal-dropcap class (or another class of your 
choosing). Use position: absolute and left:-INDENT to move the drop cap 
into the block's margin. The negative indent assigned to the drop cap is 
typically the negative of the indent assigned to the block. Occasionally, you 
may want to make it a few pixels larger than the block's indent because larger 
fonts have extra whitespace on their left. Use top: *VALUE to move the drop 
cap up or down. 


Pattern HTML 
«BLOCK class="indent"> 
«INLINE class-"marginal-dropcap"» TEXT «/INLINE» 
«/BLOCK» 


CSS 

*.indent ( position:relative; 
margin-left: +INDENT; 
margin-top:+VALUE; } 
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*.marginal-dropcap { position:absolute; 
left: - INDENT; 
top:+VALUE; } 





Location This pattern works anywhere you can have a terminal block element. 

Advantages The marginal drop cap is simple to position, but it requires manually playing 
with the size of the margin and the size of the indent to accommodate the size 
of the drop cap’s font. 

Disadvantages A border around the block containing the drop cap will not include the 


drop cap. This happens because the pattern uses margin-left instead of 
padding-left to create the indent. This avoids a positioning bug in Internet 
Explorer 6, but excludes the drop cap from being within the border around 
the block. 


Related to Margin (Chapter 6); Indented (Chapter 8); Positioned, Closest Positioned 
Ancestor, Absolute, Relative (Chapter 7); Indented, Offset Absolute, Aligned 
and Offset Absolute (Chapter 8); Left Marginal (Chapter 13) 


See also www.cssdesignpatterns.com/marginal-drop-cap 
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Marginal Graphical Drop Cap 


© Marginal Graphical Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Marginal Graphical Drop Cap 


users see the image. If the browser cannot display the dropcap 


arginal Graphical Drop Cap. The letter M has been covered by 
y // the dropcap image. Screen readers read the text and visual 
e 
image, the text becomes visible. 





HTML 


«hi»Marginal Graphical Drop Cap</h1> 


«p class-"indent"»«span class-"graphic-dropcap"»M«span»arginal 
Graphical Drop Cap. The letter M has been covered by the dropcap image. 
Screen readers read the text and visual users see the image. 
If the browser cannot display the dropcap image, 
the text becomes visible.«/p» 


CSS 


[^e] 
= 
oO 
Q- 
=] 
a 
a 


* indent { position:relative; margin-left:120px; margin-top:20px; } 


*.graphic-dropcap { position:absolute; left:-120px; top:6px; 
width: 100px; height :90px; 
line-height: 70px; padding-left:16px; text-align: right; 
font-size:80px; font-weight: bold; 
color:black; background-color:white; } 





*.graphic-dropcap span { position:absolute; 
width:100px; height:90px; left:0; top:0; margin:0; 
background-image:url("g. jpg"); 
background-repeat:no-repeat; } 
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Marginal Graphical Drop Cap 


Problem You want to display the first letter of a paragraph as an image in a marginal drop 
cap. If the browser cannot display the image, you want the dropcap text to be 
visible. You want screenreader software to read the drop cap properly. 


Solution Combine the Marginal Drop Cap design pattern, the Text Replacement design 
pattern (Chapter 10), and the Top-offset Sized Absolute Element design pattern. 


Indent a terminal block element to make room for the drop cap. Make the block 
positioned so the drop cap can be absolutely positioned relative to it. Tag the 
dropcap text with a span and use absolute positioning to move it into the block’s 
indent. Embed a span into the drop cap to display the dropcap graphic as its 
background image. Absolutely position the embedded span to cover the dropcap 
text so that it is hidden behind it. 


Pattern HTML 

«BLOCK class="indent"> 
«INLINE class-"graphic-dropcap"» TEXT <span></span></INLINE> 

</BLOCK> 

CSS 

*.indent ( position:relative; 
margin-left: +INDENT; 
margin-top:+VALUE; } 


*.graphic-dropcap { position:absolute; 
left: - INDENT; 
top:+VALUE ; 
width: IMAGE_WIDTH; 
height:IMAGE HEIGHT; 
line-height :+VALUE; 
padding-left:+VALUE; 
text-align:right; } 
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*.graphic-dropcap span { position:absolute; 
width: IMAGE_WIDTH; 
height:IMAGE HEIGHT; 
margin:0; 
left:0; 
top:0; 
background-image:url("FILE.EXT"); 
background-repeat:no-repeat; } 





(Continued) 
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Marginal Graphical Drop Cap (Continued) 


©) Marginal Graphical Drop Cap - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Marginal Graphical Drop Cap 


the dropcap image. Screen readers read the text and visual 
users see the image. If the browser cannot display the dropcap 
image, the text becomes visible. 


M arginal Graphical Drop Cap. The letter M has been covered by 





Figure 18-1. What the Marginal Graphical Drop Cap example looks like when the browser cannot 
load or display the image 
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Marginal Graphical Drop Cap (Continued) 


Solution details To make room for the drop cap, you can indent the terminal block element 
containing the drop cap using margin-left:+VALUE. Because of a bug in 
Internet Explorer 6, you should use margin-left instead of padding. The 
indent should be as large as or larger than the width of the dropcap image. 
The larger the indent, the more space you can put between the drop cap 
and the text. To move the drop cap above the block, you can use margin-top: 
*VALUE to make room for it. Because the drop cap is positioned relative to the 
block, you need to position the block using position:relative.You could also 
use position:absolute or position:fixed to make the block positioned. 


You can tag the dropcap text with a span and assign it to the graphic-dropcap 
class. To move the drop cap into the space created by the indent, you can use 
position:absolute, and you can set left to the negative of the indent you 
assigned to margin-left.You can use top to move the drop cap up or down in 
relation to the block. You need to use width and height to size the drop cap to 
the exact size of the image. This ensures the dropcap text will be completely 
covered by the dropcap image. 


In case the image cannot be displayed (see Figure 18-1), you can use font 
properties to style the dropcap text. You can use line-height to move the 
dropcap text up or down. You can use text-align:right to move the dropcap 
text next to the block and padding-left:+VALUE to move it even closer to the 
block. 


To display the dropcap image over the top of the dropcap text, you can embed 
a span in the graphical dropcap span and use background-image to display the 
dropcap image in it. To hide the dropcap text behind the image, the image 
should not have a transparent background. To position the dropcap image 
over the dropcap text, you can use position:absolute, left:0, top:0, and 
margin:0. You need to use width and height to size the span to the image. 
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Location This pattern works anywhere you can have a terminal block element. 


Advantages The graphical drop cap is simple to position. It degrades gracefully when 
the graphic cannot be displayed because the dropcap text is displayed in 
its place. You can style the dropcap text so that it looks good whenever the 
browser cannot display the background image. Lastly, screen readers can 
read the dropcap text without any problem, while sighted users see the 
image in its place. 





Disadvantages Like all marginal design patterns, a border around the terminal block 
containing the drop cap will not include the drop cap. 
Related to Floating Graphical Drop Cap, Padded Graphical Drop Cap; Margin (Chapter 6); 


Positioned, Closest Positioned Ancestor, Absolute, Relative (Chapter 7); 
Indented, Offset Absolute, Aligned and Offset Absolute (Chapter 8); Top-offset 
Sized Absolute Element (Chapter 9); Text Replacement (Chapter 10), 
Horizontal-aligned Content (Chapter 12); Left Marginal (Chapter 13) 


See also www. cssdesignpatterns.com/marginal-graphical-drop-cap 


CHAPTER 19 


Callouts and Quotes 


This chapter discusses design patterns that create callouts and quotes. 

A callout is a key point pulled out of the document to grab a reader’s attention so he or 
she will read the document and remember the point after having read it. A callout is repeated 
twice in a document: once as part of the body of the document and once again for display as 
a callout. A callout is displayed prominently so the reader cannot miss it. Because a callout is 
extracted from a documents text, it is often an inline element, although it could be a block 
element. 

Ihave grouped callouts and quotes together because they are closely related. Callouts are 
also known as pull quotes because they are quotes pulled from the document. There are dif- 
ferences between pull quotes and quotes. A pull quote (or callout) requires the same text to be 
repeated twice within a document, whereas a quote occurs only once. Also, a quote typically 
includes a citation, whereas a pull quote does not. Lastly, quotes belong visually and semanti- 
cally as part of the content, whereas callouts are visually and semantically set apart from the 
content and are often moved to the left or right sides or margins of a document. In the rest of 
this chapter, I will refer to pull quotes as callouts to avoid confusing them with regular quotes. 


Chapter Outline 


* Left Floating Callout shows how to create a callout and float it to the left. 
* Right Floating Callout shows how to create a callout and float it to the right. 
* Center Callout shows how to create a callout and center it. 


* Left Marginal Callout shows how to create a callout in the left margin using the 
marginal design pattern. 


* Right Marginal Callout shows how to create a callout in the right margin using the right 
marginal design pattern. 


* Block Quote shows how to create a block quote with a citation that is automatically 
centered and styled with graphical background quotes. 


* Inline Block Quote shows how to render an inline quote as a block quote. 


* Inline Quote shows how to create an inline quote with a citation. 


438 CHAPTER 19 = CALLOUTS AND QUOTES 


Left Floating Callout 


© Left Floating Callout - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Left Floating Callout 


A callout makes the key point stand out to the reader. You can float a 
callout to the left using float:left. You 
can use width to set the callout's width. 
You can use margin to put distance 
between the callout and text outside the 
callout. You can use padding to put space 
between the callout's internal text and its borders. You can use 
position:relative and top to adjust the vertical position of the callout. 


Makes the key 
point stand out 





HTML 


«hi»Left Floating Callout</h1> 
«p»A callout makes the key point stand out to the reader. 
«span class-"callout"»Makes the key point stand out«/span» 


You can float a callout to the left using <code>float:left</code>. 

You can use «code»width«/code» to set the callout's width. 

You can use «code»margin«/code» to put distance between the callout and 
text outside the callout. You can use «code»padding«/code» to put space 
between the callout's internal text and its borders. You can use 
«code»position:relative«/code» and «code»top«/code» to adjust the vertical 
position of the callout.«/p» 


CSS 
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*.callout-left ( float:left; width:200px; padding: 6px; 
margin:10px 40px 10px 30px; 
position:relative; top:10px; 
font-size:22px; line-height:normal; font-weight :bold; 
text-align:center; color:black; background-color:gold; 
border-left:1px solid black; border-right:1px solid black; 
border-top:6px solid black; border-bottom:6px solid black; } 





CHAPTER 19 = CALLOUTS AND QUOTES 


Left Floating Callout 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 


Related to 


See also 


You want to remove content from the flow and display it prominently to the 
reader on the left side. 


In general terms, you want to pull content out of the flow to emphasize it. 


A callout is removed from the normal flow and styled to make its content stand 
out to the user. It usually has a larger font, margins, borders, and background 
around the outside to set it apart from surrounding content. Callouts can include 
all kinds of content, such as quotes, key phrases, attention getters, and so on. 


You can assign an inline element to the callout class. You can use float: left 
to float the callout to the left. You can use padding to put distance between the 
callout's content and its border. You can use position:relative to position the 
callout so you can move it. You can use top to move the callout up or down. You 
can use margin-left to move the callout to the right. You can use margin-right 
to put distance between the callout's right border and external text. You can use 
margin-top and margin-bottom to put distance between the callout's top and 
bottom borders and external text. 


HTML 
«INLINE class-"callout"» CONTENT «/INLINE» 


CSS 

*.callout ( float:left; position:relative; 
width:+VALUE; 
padding: +VALUE ; 
margin-top:+VALUE; margin-bottom: +VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
top:+VALUE; } 


This pattern works on any element. 


If you left-float any other elements close to where the callout is floated, they may 
stack next to each other. This would likely detract from the callout effect. Floats 
tend to bring out bugs in browsers. 


A callout should be positioned in the text where it makes sense if it were read as 
part of the text. A screen reader will read it where it occurs, and a browser that 
does not support absolute positioning will display it inline where it occurs. I 
recommend placing the callout’s markup immediately after the text it is quoting. 
Screen readers will read it twice, which emphasizes the callout aurally through 
repetition just like it is emphasized visually. 


Right Floating Callout, Center Callout; Floated Box (Chapter 4); Width (Chapter 5); 
Margin, Padding (Chapter 6); Float and Clear, Relative Float (Chapter 7); Offset 
Float (Chapter 8) 


www.cssdesignpatterns.com/left-floating-callout 
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Right Floating Callout 


© Right Floating Callout - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Right Floating Callout 


The main feature of the floating callout is that text can wrap under and over 
it because it is a float. You can float a callout to the right using float:right. 
You can use width to set the callout's width. 
You can use margin to put distance between 
the callout and text outside the callout. You 


Wraps under 


can use padding to put space between the and over 
callout's internal text and its borders. You can 
use position: relative and top to adjust the vertical position of the callout. 





HTML 


«hi»Right Floating Callout</h1> 


<p>The main feature of the floating callout is that text can wrap 
under and over it because it is a float. 


<span class="callout">Wraps under and over</span> 


You can float a callout to the right using <code>float:right</code>. 

You can use <code>width</code> to set the callout's width. 

You can use <code>margin</code> to put distance between the callout and 
text outside the callout. You can use <code>padding</code> to put space 
between the callout's internal text and its borders. You can use 
«code»position:relative«/code» and <code>top</code> to adjust the vertical 
position of the callout.</p> 


CSS 
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*.callout ( float:right; width:200px; padding:6px; 
margin:10px 30px 10px 40px; 
position:relative; top:10px; 
font-size:22px; line-height:normal; font-weight:bold; 
text-align:center; color:black; background-color:gold; 
border-left:ipx solid black; border-right:1px solid black; 
border-top:6px solid black; border-bottom:6px solid black; j 





CHAPTER 19 = CALLOUTS AND QUOTES 


Right Floating Callout 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tip 


Related to 


See also 


You want to remove content from the flow and display it prominently to the 
reader on the right side. 


In general terms, you want to pull content out of the flow to emphasize it. 


A callout is removed from the normal flow and styled to make its content stand 
out to the user. It usually has a larger font, margins, borders, and background 
around the outside to set it apart from surrounding content. Callouts can include 
all kinds of content, such as quotes, key phrases, attention getters, and so on. 


You can assign an inline element to the callout class. You can use float:right 
to float the inline element to the right content edge of its parent terminal block 
element. You can use padding to put distance between the callout's content and 
its border. You can use position:relative to position the callout so you can 
move it. You can use top to move the callout up or down. You can use margin-left 
to put distance between the callout's left border and external text. You can use 
margin-right to move the callout to the left. You can use margin-top and 
margin-bottom to put distance between the callout's top and bottom borders 
and external text. 


HTML 
«INLINE class-"callout"» CONTENT </INLINE> 
CSS 
*.callout ( float:right; position:relative; 
width:+VALUE; 
padding: +VALUE ; 
margin-top:+VALUE; margin-bottom: +VALUE; 
margin-left:+VALUE; margin-right:+VALUE; 
top:+VALUE; } 


This pattern works on any element. 


If you right-float any other elements close to where the callout is floated, they 
may stack next to each other. This would likely detract from the callout effect. 
Floats tend to bring out bugs in browsers. 


A callout should be positioned in the text where it makes sense if it were read as 
part of the text. 


Left Floating Callout, Center Callout; Floated Box (Chapter 4); Width (Chapter 5); 
Margin, Padding (Chapter 6); Float and Clear, Relative Float (Chapter 7); Offset 
Float (Chapter 8) 


www. cssdesignpatterns.com/right-floating-callout 
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Center Callout 


Center Callout - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Center Callout 


display:block clears text on each side of the callout. width sets the 
callout's width. margin-top and margin-bottom set the distance above 
and below the center callout. 


Center Callout! 


margin-left:auto and margin-right: auto center the callout in its 
parent terminal block element.position: relative and left adjust the 
horizontal position of the callout away from center. 





HTML 
<h1>Center Callout</h1> 
<p><code>display:block</code> clears text on each side of the callout. <code> 


width</code> sets the callout's width. <code>margin-top</code> and <code> 
margin-bottom</code> set the distance above and below the center callout. 


<span class="callout">Centered Callout! </span> 
<code>margin-left:auto</code> and <code>margin-right:auto</code> center the 
callout in its parent terminal block element.«code»position:relative«/code» 


and «code»left«/code» adjust the horizontal position of the callout 
away from center.«/p» 


CSS 
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* callout { display:block; width:300px; margin:20px auto; padding: 6px; 
position:relative; left:0%; 
font-size:22px; line-height:normal; font-weight:bold; 
text-align:center; color:black; background-color: gold; 
border-left:1px solid black; border-right:1px solid black; 
border-top:6px solid black; border-bottom:6px solid black; } 





CHAPTER 19 = CALLOUTS AND QUOTES 


Center Callout 


Problem 


Solution 


Pattern 


Location 


Limitations 


Tips 


Related to 


See also 


You want to remove content from the flow and display it prominently to the 
reader in the center of the text with no content flowing to its left or right. 


In general terms, you want an inline element to be rendered like a block element. 


A callout is removed from the normal flow and styled to make its content stand 
out to the user. It usually has a larger font, margins, borders, and background to 
set it apart from surrounding content. Callouts can include all kinds of content, 
such as quotes, key phrases, attention getters, and so forth. 


You can assign an inline element to the callout class. You can use display:block 
to display the inline element as a block element. You can use width to set the 
callout's width. If content is wider than the width, a browser wraps the content 
and extends the height of the callout. You can use margin-left:auto and 
margin-right:auto to center the callout. You can use margin-top and 
margin-bottom to put space above the callout's top border and below its bottom 
border. You can use padding to put distance between the callout's content and 
its border. You can use position:relative and left to move it to the left or right 
of center. Using a percentage in left is convenient because it is a percentage of 
the callout container's width. 


HTML 
«INLINE class-"callout"» CONTENT </INLINE> 
CSS 
*.callout ( display:block; position:relative; 
width:+VALUE; 
margin-top:+VALUE; margin-bottom: +VALUE; 
left:+VALUE%; padding:+VALUE; 
margin-left:auto; margin-right:auto; } 


This pattern works on any element. 


CSS 2.1 provides no automatic way to flow content on the left or right ofa 
centered callout. Thus, a centered callout extends across the entire width of 
its parent. 


A callout should be positioned in the text where it makes sense if it were read as 
part of the text. 


Left Floating Callout, Right Floating Callout; Display, Block Box (Chapter 4); 
Width (Chapter 5); Margin, Padding (Chapter 6); Relative (Chapter 7); Offset 
Relative (Chapter 8); Center Aligned (Chapter 9); Blocked (Chapter 11) 


www. cssdesignpatterns.com/center-callout 
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Left Marginal Callout 


© Left Marginal Callout - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Left Marginal Callout 


The main feature of the marginal callout is that text 


Text does does not wrap under or over the callout because 
not wrap the callout is in the margin. You can indent the 
under... block to make room for the callout on the left. You 
can use absolute positioning to pull the callout out 
of the text and move it into the left margin. 





HTML 


«hi»Left Marginal Callout</h1> 


«p class-"left-marginal"» 
«span class-"callout"»Text does not wrap under...«/span» 
The main feature of the marginal callout is that text does not wrap 
under or over the callout because the callout is in the margin. 
You can indent the block to make room for the callout on the left. 
You can use absolute positioning to pull the callout out of the text 
and move it into the left margin.«/p» 


CSS 


*.left-marginal ( position:relative; width:470px; margin-left:230px; ) 


*.callout ( position:absolute; left:-220px; width:160px; margin-top:5px; 
line-height:normal; text-align:center; padding:5px 0; 
font-size:22px; font-weight:bold; 
color:black; background-color:gold; 
border-left:ipx solid black; border-right:1px solid black; 
border-top:6px solid black; border-bottom:6px solid black; j 
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CHAPTER 19 = CALLOUTS AND QUOTES 445 


Left Marginal Callout 


Problem You want to excerpt text out of the normal flow and move it into the left margin 
as a callout. You want items in the margin to be positioned vertically where they 
would have been in the flow. You do not mind using fixed widths. You do not use 
many callouts, so the risk of overlap is minimal. 


Solution You can indent text to create a margin on the left and then use absolute 
positioning to remove content from the normal flow into the margin. 


You can use margin-left to indent the terminal block. You can use 
position:relative to position the block so its inline children can be positioned 
relative to its margin. You can use margin-right:auto and width to fix the width 
of the terminal block so that the content does not reflow. Without a fixed width, 
content reflows when the viewport resizes, and reflow may change the vertical 
location of callouts, causing them to overlap. 


You can assign an inline element to the callout class. You can use position: 
absolute to remove the inline element from the flow. You can use width to size 
the inline element to fit into the margin. You can assign a negative value to left 
to move the inline element into the left margin. You can use margin-top to move 
the inline element up or down. 


Pattern HTML 
«TERMINAL BLOCK class-"left-marginal"» 
TEXT 
«INLINE TEXT class-"callout"» CALLOUT TEXT «/INLINE TEXT» 
TEXT 
«/TERMINAL BLOCK» 


CSS 
*.left-marginal ( position:relative; width:+VALUE; 
margin-left:+VALUE; margin-right:auto; } 


* callout { position:absolute; 
left:-VALUE; 
width:+VALUE; 
margin-top:+VALUE; } 


Q 

Location This pattern works only on inline elements inside terminal block elements. E 
E 

Caution The layout created by this pattern does not protect content from overlapping. S 
It is very easy to move callouts into the margin and to have them overlap each 2 

other and other content moved into the margin. E 

Tips A callout should be positioned in the text where it makes sense if it were read as = 
part of the text. = 

n 


You can combine this pattern with Right Marginal Callout. 


This pattern is visually similar to HTML tables, but the markup is more flexible. 
You can pull out any inline content and move it into the margin. 


Related to Right Marginal Callout; Left Marginal (Chapter 13) 


See also www.cssdesignpatterns.com/left-marginal-callout 
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CHAPTER 19 = CALLOUTS AND QUOTES 


Right Marginal Callout 


© Right Marginal Callout - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Right Marginal Callout 


The main feature of the marginal callout is that text 


does not wrap under or over the callout because the Text does 
callout is in the margin. You can indent the block to not wrap 
make room for the callout on the right. You can use under... 
absolute positioning to pull the callout out of the text 

and move it into the right margin. 





HTML 


«hi»Right Marginal Callout</h1> 


<p class="right-marginal"> 
<span class="callout">Text does not wrap under...</span> 


The main feature of the marginal callout is that text does not wrap 

under or over the callout because the callout is in the margin. 

You can indent the block to make room for the callout on the right. 

You can use absolute positioning to pull the callout out of the text 
and move it into the right margin.</p> 


CSS 


*.right-marginal { position:relative; width:490px; margin-right:230px; } 


* callout ( position:absolute; right:-200px; width:160px; margin-top: 5px; 
line-height:normal; text-align:center; padding:5px 0; 
font-size:22px; font-weight: bold; 
color:black; background-color: gold; 
border-left:1px solid black; border-right:1px solid black; 
border-top:6px solid black; border-bottom:6px solid black; } 


CHAPTER 19 = CALLOUTS AND QUOTES 


Right Marginal Callout 


Problem 


Solution 


Pattern 


Location 


Caution 


Tips 


Related to 
See also 


You want to excerpt text out of the normal flow and move it into the right margin 
as a callout. You want items in the margin to be positioned vertically where they 

would have been in the flow. You do not mind using fixed widths. You do not use 

many callouts, so the risk of overlap is minimal. 


You can indent text to create a margin on the right and then use absolute 
positioning to remove content from the normal flow into the margin. 


You can use margin-right to indent the terminal block. You can use position: 
relative to position the block so its inline children can be positioned relative 
to its margin. You can use margin-left:auto and width to fix the width of the 
terminal block so that the content does not reflow. Without a fixed width, 
content reflows when the viewport resizes, and reflow may change the vertical 
location of callouts, causing them to overlap. 


You can assign an inline element to the callout class. You can use position: 
absolute to remove the inline element from the flow. You can use width to size 
the inline element to fit into the margin. You can assign a negative value to left 
to move the inline element into the left margin. You can use margin-top to move 
the inline element up or down. 


HTML 
«TERMINAL BLOCK class-"right-marginal"» 
TEXT 
«INLINE TEXT class-"callout"» CALLOUT TEXT «/INLINE TEXT» 
TEXT 
«/TERMINAL BLOCK» 
CSS 
*.right-marginal { position:relative; width:+VALUE; 
margin-right:+VALUE; margin-left:auto; } 


* callout { position:absolute; 
right: -VALUE; 
width:+VALUE; 
margin-top:+VALUE; } 


This pattern works only on inline elements inside terminal block elements. 


The layout created by this pattern does not protect content from overlapping. 
It is very easy to move callouts into the margin and to have them overlap each 
other and other content moved into the margin. 


A callout should be positioned in the text where it makes sense if it were read as 
part of the text. 


You can combine this pattern with Left Marginal Callout. 


This pattern is visually similar to HTML tables, but the markup is more flexible. 
You can pull out any inline content and move it into the margin. 


Left Marginal Callout; Right Marginal (Chapter 13) 


www. cssdesignpatterns.com/right-marginal-callout 
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CHAPTER 19 = CALLOUTS AND QUOTES 


Block Quote 


© Block Quote - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Block Quote 


A block quote contains one or more paragraphs, 
and a citation. A block quote is not repeated twice 
in the document like a callout. 


This example includes an embedded, decorative 
division so it can display a graphical closing quote. 


cssDesignPatterns.com 





HTML 


«hi»Block Quote</h1> 


<blockquote><div> 

<p>A block quote contains one or more paragraphs, and a citation. 
A block quote is not repeated twice in the document like a callout.</p> 

<p>This example includes an embedded, decorative division so it can display 
a graphical closing quote.</p> 

<cite><a href="http://www.cssdesignpatterns.com/block-quote"> 
cssDesignPatterns.com«/a»«/cite» 

«/div»«/blockquote» 


CSS 


blockquote ( width:500px; margin:10px auto; 
position:relative; left:0%; text-align:justify; 
line-height:1.3em; color:black; 
padding-top:40px; padding-left:40px; 
background:url("dq1.jpg") no-repeat top left; } 


blockquote div ( padding-bottom:10px; padding-right: 40px; 
background:url("dq2.jpg") no-repeat bottom right; } 


blockquote p { margin:0; margin-bottom:10px; } 


blockquote cite { display:block; text-align:right; font-size:0.9em; } 


CHAPTER 19 = CALLOUTS AND QUOTES 


Block Quote 


Problem 


Solution 


Pattern 


Location 


Tip 
Related to 


See also 


You want to create a block quote. You want to set a quote apart from the rest of 
the content and make it easily recognizable as a block quote. You want the block 
quote to include one or more paragraphs and a citation. You want it to be styled 
with graphical opening and closing quotes. 


Like a center callout, a block quote usually has a different font, margins, borders, 
and background to set it apart from surrounding content. 


You can embed the block quote in the «blockquote» element. You can use width 
to set its width. You can use margin-left:auto and margin-right:auto to center 
it. You can use margin-top and margin-bottom to put space above and below it. 

You can use position:relative and left to move it to the left or right of center. 


You can use background to apply a background image to the block quote. You can 
use padding-top and padding-left to put space between the image and the block 
quote's text. You can also embed a division immediately inside the block quote 

to display a second background image. You can use padding-bottom and 
padding-right to put space between its image and the block quote's text. 


You can use the «cite» element to place a citation following the block quote. 
You can place any inline content in «cite». A citation commonly contains a 
description of the source embedded in a hyperlink to the source. 


HTML 
«blockquote»«div» 

«p» QUOTE </p> «p» MORE QUOTE </p> 

<cite> <a href="URL"> CITATION </a> </cite> 
</div></blockquote> 


CSS 

blockquote { width:+VALUE; margin:+VALUE; 
position:relative; left:+VALUE%; 
padding-top:+VALUE; padding-left:+VALUE; 
background: url("FILE.EXT") no-repeat top left; } 


blockquote div { padding-bottom:+VALUE; padding-right:+VALUE; 
background: url("FILE.EXT") no-repeat bottom right; } 


blockquote p { STYLING PARAGRAPHS IN A BLOCKQUOTE } 


blockquote cite ( STYLING CITATIONS IN A BLOCKQUOTE ) 


This pattern works only inside block containers because «blockquote» is a block. 
See Inline Block Quote when you need the block quote to be inline. 


A block quote can contain any inline content, including images and objects. 


Center Callout, Inline Block Quote, Inline Quote; Display, Block Box (Chapter 4); 
Width (Chapter 5); Margin, Padding, Background (Chapter 6); Relative (Chapter 7); 
Offset Relative (Chapter 8) 


www. cssdesignpatterns.com/block-quote 
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CHAPTER 19 = CALLOUTS AND QUOTES 


Inline Block Quote 


© Inline Block Quote - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Inline Block Quote 


This quote is embedded in a paragraph, but looks like a block quote. 


An inline block quote is marked up with inline 
elements, but looks like a block quote because its 
elements are rendered using display:block. 


I embedded a decorative span in this example to 
display a graphical closing quote. 
cssDesignPatterns.com 


HTML 


«hi»Inline Block Quote</h1> 
<p>This quote is embedded in a paragraph, but looks like a block quote. 


«span class="blockquote"><span> 
An inline block quote is marked up with inline elements, but looks like a 
block quote because its elements are rendered using «code»display:block«/code». 
<br /» «br />I embedded a decorative span in this example to display 
a graphical closing quote. 


<cite><a href-"http://www.cssdesignpatterns.com/block-quote"» 
cssDesignPatterns.com«/a»«/cite»«/span»«/span» «/p» 


CSS 


* 


.blockquote ( display:block; width:500px; margin:10px auto; 
position:relative; left:0%; text-align:justify; 
line-height:1.3em; color:black; 

padding-top:40px; padding-left:40px; 
background:url("dq1.jpg") no-repeat top left white; } 


* 


.blockquote span ( display:block; 
padding-bottom:20px; padding-right:40px; 
background:url("dq2.jpg") no-repeat bottom right; } 


* 


.blockquote cite { display:block; text-align:right; font-size:0.9em; } 


CHAPTER 19 = CALLOUTS AND QUOTES 


Inline Block Quote 


Problem 


Solution 


Pattern 


Location 


Tips 


Related to 


See also 


You want to create a block quote inside a paragraph. 


You cannot use «blockquote» because it cannot be embedded in a paragraph 
since itis a block element. You should not use the «q» element, for the reasons 
cited in the discussion of the Inline Quote design pattern. 


You can embed the block quote in «span class-"blockquote"» instead of 
«blockquote» or «q». You can use display:block on the span and all child 
elements to display them as blocks. This is the key ingredient of this design 
pattern. Once all the elements are displayed as blocks, the rest of the rules 
work like the Block Quote design pattern. 


HTML 
«span class-"blockquote"»«span» 
QUOTE «br /»«br /» MORE QUOTE 
«cite» «a href-"URL"» CITATION «/a» «/cite» 
«/span»«/span» 
CSS 
*.blockquote { display:block; 
width:+VALUE; margin:+VALUE; 
position:relative; left:+VALUE%; 
padding-top:+VALUE; padding-left:+VALUE; 
background: url("FILE.EXT") no-repeat top left; } 


* blockquote span { display:block; 
padding-bottom:+VALUE; padding-right:+VALUE; 
background: url("FILE.EXT") no-repeat bottom right; } 





* blockquote cite { display:block; } 
This pattern works in any inline context. 
You can insert line breaks to simulate separate paragraphs within the quote. 


It is better to use <blockquote> for block quotes because search engines and 
document processors understand the meaning of <blockquote>. Search engines 
give greater importance to content in <blockquote> and <cite>. 


Center Callout, Block Quote, Inline Quote; Display, Block Box (Chapter 4); Width 
(Chapter 5); Margin, Padding, Background (Chapter 6); Relative (Chapter 7); 
Offset Relative (Chapter 8); Blocked (Chapter 11) 


www. cssdesignpatterns.com/inline-block-quote 
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Inline Quote 


© Inline Quote - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Inline Quote 


"A quote should be followed by a citation." (cssDesignPatterns.com) 





we 


If you embed a quote inside <q> most browsers will automatically insert 
double quotes — whether or not you want them!" (cssDesignPatterns.com)" 





HTML 


«hi»Inline Quote</h1> 


«p»«span class="quote"> 
"A quote should be followed by a citation." 
(<cite><a href-"http://www.cssdesignpatterns.com/block-quote"» 
cssDesignPatterns.com«/a»«/cite»)«/span»«/p» 


«p»«q» «!-- Do not use <q>. --> 
"If you embed a quote inside «code»8lt;q8gt;«/code» most browsers 
will automatically insert double quotes — whether or not you want them!" 
(«cite»«a href="http://www.cssdesignpatterns.com"> 
cssDesignPatterns.com</a></cite>)</q></p> 


CSS 


* quote { letter-spacing:0.07em; } 
* quote cite { font-size:0.9em; } 


wn 
ui 
oO 
—] 
oS 
Qa 
Z 
< 
N 
m 
=) 
oO 
=| 
[45] 





CHAPTER 19 = CALLOUTS AND QUOTES 


Inline Quote 


Problem 


Solution 


Pattern 


Location 


Tips 


Example 


Related to 
See also 


You want to create an inline quote. 
You cannot use «blockquote» because it is a block element. 


You should not use the «q» element, even though it was designed for inline 
quotes, because most browsers automatically insert English-style double quotes 
around the contents of «q». This is a problem because there are over 23 different 
types of international quotation marks and many ways these can be combined 
to indicate quotes in different languages, dialects, and writing styles. Because of 
this complexity, only an author can make the choice of quotation marks. It is 
unfortunate that the HTML specification requires browsers to automatically 
insert quotes around the contents of «q». Internet Explorer does not insert 
quotes, and other browsers should follow its lead. 


You can enclose an inline quote in «span class-"quote"» to identify it as a quote. 
You can include a citation following the text of the quote and before the end tag 
of the </span>. A citation is typically placed within parentheses and is enclosed 
in the «cite» element. You can place any inline content in «cite». A citation 
commonly contains a description of the source of the quote, which is commonly 
embedded in a hyperlink to the actual source. 


The double quote marks shown in the following pattern can be replaced by any 
type of quote marks. 


HTML 
«span class-"quote"» 
"QUOTE" («cite»«a href="URL"> SOURCE </a></cite>)</span> 


CSS 
*.quote ( STYLES } 
*.quote cite ( STYLES } 


This pattern works on any element. 


Because it is natural to put linebreaks between elements like «cite» and «a», it 
is easy to introduce undesirable whitespace between the parentheses and the 
contents of the citation. The obvious solution is not to put whitespace between 
these elements. If that is not an option, you can put a linebreak inside a tag 
instead of between tags. In my example, I put a linebreak inside the «a» tags 
just before the closing greater-than sign. 


Notice how Firefox added quotation marks around the second example because 
it was embedded in <q> instead of «span class="quote">. 


Inline Block Quote; Inline Elements (Chapter 2) 


www. cssdesignpatterns.com/inline-quote 
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CHAPTER 20 


Alerts 


bi chapter discusses design patterns that create an alert. An alert points out important 
information to the reader by separating it from the content. There are two basic types of alerts: 
dynamic and static. The first three design patterns in this chapter are dynamic alerts, which 
dynamically display information as a user interacts with the document. The remaining alerts 
in this chapter are static alerts, which are always displayed in a document. The Alert design 
pattern is an HTML pattern, which is basically a heading followed by the alert's message. The 
design patterns following Alert combine it with other design patterns, demonstrating how you 
can combine existing design patterns to create new design patterns. 


Chapter Outline 


* JavaScript Alert shows how to dynamically pop up an alert based on an event. 
* Tooltip Alert shows how to create a tooltip to show the user extra information. 
* Popup Alert shows how to pop up an alert to show the user extra information. 
* Alert shows the basic HTML structure of an alert. 

* Inline Alert shows how to make an alert using an inline element. 


* Hanging Alert shows how to move the alert's heading to the left side and the content to 
the right side by using a hanging indent that does not require extra markup. 


* Graphical Alert shows how to move the alert's heading to the left side and the content 
to the right side and replace the heading with an image. 


* Run-in Alert shows how to run the alert's heading into the first line of the content. 


* Floating Alert shows how to float an alert to the left or the right of the content with its 
heading on the left and its content on the right. 


* Left Marginal Alert shows how to move an alert into the left margin using absolute 
positioning. 


* Right Marginal Alert shows how to move an alert into the right margin using absolute 
positioning. 
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JavaScript Alert 


) JavaScript Alert - Mozilla Firefox mE 
File Edit View History Bookmarks Tools Help ze 


JavaScript Alert 


A JavaScript alert pops up a dialog box when the user clicks on it. Its 





presence can be signalled by a small image Gor specially styled text, such as 
a dotted underline. 


[JavaScript Application] 


A Alert text goes here. 





HTML 


<h1>JavaScript Alert</h1> 


<p>A JavaScript alert pops up a dialog box when the user clicks on it. 
Its presence can be signalled by a small image«img class-"alert-image" 
onclick-"alert('Alert text goes here.');" src-"help.gif" alt-"alert" /» 


or specially styled text, such as a 
«em class-"alert" onclick-"alert('Alert text goes here.');"» 
dotted underline.«/em» 

</p> 


CSS 


*.alert-image { cursor:pointer; margin-left:3px; } 


*.alert { cursor:pointer; border-bottom:1px dotted; 
font-style:normal; font-size:0.8em; } 
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JavaScript Alert 


Problem 


Solution 


Patterns 


Location 


Limitations 


Advantages 


Disadvantages 


Related to 


See also 


You want to insert helpful, yet nonessential messages into your document, 
such as tips or help. You do not want the alert to be visible unless the reader 
clicks it. You want an unobtrusive way to show the reader that the alert is 
present. You also want the alert to be accessible to nonsighted users. 


To signal the presence of the alert, you can insert a small image following the 
text for which you want to supply extra information, or you can style the text. 
A dotted underline is the traditional signal that text has extra information 
associated with it. The image or styled text signals the presence of an alert. 
You can put the text of the alert in the JavaScript alert() function and put the 
alert function in the image's onclick attribute. A browser displays the alert in 
a popup dialog box when the user clicks the image. Screen readers recognize 
the onclick attribute and read its contents to the user. 


HTML 

«img class-"alert-image" src-"FILE.EXT" 
onclick="alert('ALERT TEXT');" alt-"alert" /> 

or 

«em class-"alert" onclick="alert('ALERT TEXT');"» TEXT </em> 


CSS 
*.alert-image ( cursor:pointer; } 
*.alert ( cursor:pointer; border-bottom:1px dotted; } 


This pattern works on any element. 


onclick is the only event that all major screen readers recognize and handle 
properly. Other events require testing for compatibility with screen readers. 


JavaScript alerts can contain several paragraphs of text and stay open as long 
as the user wants. This is a significant advantage over the Tooltip Alert design 
pattern. 


Normally putting JavaScript directly in markup is a poor practice. This case 
is an exception, because the script is content (a message to the user) and 
belongs in the content. For this reason, screen readers are designed to read 
the contents of onclick attributes. 


Popup dialog boxes annoy users because they interrupt the workflow. For 
example, the dialog box usually opens in the middle of the browser window, 
taking the user's eyes away from where he or she was reading. After having to 
click the OK button to close the dialog box, the user has to rescan the text to 
find the place where he or she was reading. 


The dialog box is unpleasant to look at. Its contents cannot be styled, and the 
dialog box cannot be styled. And unlike a web page, a user cannot zoom in to 
make the dialog box's small text easier to read. 


Alert, Inline Alert; Image, Replaced Text (Chapter 14); Event Styling (Chap- 
ter 17) 


www. cssdesignpatterns.com/javascript-alert 
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Tooltip Alert 


) Tooltip Alert - Mozilla Firefox DER | 
File Edit View History Bookmarks Tools Help p 





Tooltip Alert 


A tooltip alert slips right into the flow of text. Its presence is signalled by a 


Tooltip text goes here. 


The tooltip ale partrcurarly useful when you want to give the reader some 
extra help O in understanding or using something. 





HTML 


<h1>Tooltip Alert</h1> 


<p>A tooltip alert slips right into the flow of text. It is usually signalled 
by a small image<img class="imagetip" src="alert.gif" 
title="Tooltip text goes here." 
alt="Tooltip text goes here." /> 


or some type of text decoration, such as a 

«em class-"texttip" title-"Tooltip text goes here."> 

dotted underline«img src="invisible.gif" alt="Tooltip text goes here." />.</em> 
</p> 


CSS 
*.tooltip-image { cursor:help; margin-left:3px; } 


*.tooltip { cursor:help; border-bottom:1px dotted; 
font-style:normal; font-size:0.8em; } 
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Tooltip Alert 


Problem 


Solution 


Patterns 


Location 


Limitations 


Tips 


Related to 


See also 


You want to insert brief, helpful, nonessential tips into your document. You do 
not want it to be visible unless the reader moves the mouse over it. You want an 
unobtrusive way to show the reader that the tip is present. You also want it to be 
accessible to nonsighted users. You do not want to use JavaScript in any way. 


You can insert a small image following the text for which you want to supply 
extra information. This image signals the presence of a tip. You can put the tip in 
its title and alt attributes. A browser automatically displays the title text when 
the user mouses over the image, and a screen reader automatically reads the alt 
text of the image. 


If you do not want to use an image, you can style text to signal the presence of a 
tip. A dotted underline is the traditional signal that text has extra information. 
To make the tip accessible, you can insert a transparent, 1-pixel image with an 
alt tag set to the tip's text. 


HTML 
«img class-"tooltip-image" src-"FILE.EXT" 
title-"TOOLTIP TEXT" alt="TOOLTIP TEXT" /> 
or 
<em class="tooltip" title="TOOLTIP TEXT"> 
<img src-"invisible.gif" alt-"TOOLTIP TEXT." /» TEXT </em> 


CSS 
*.tooltip-image { cursor:help; } 
* tooltip { cursor:help; border-bottom:1px dotted; } 


This pattern works inline. 


Screen readers do not read title attributes, but they do read the alt attributes of 
images. That is why this design pattern requires the use of an image, even if you 
do not want sighted users to see it. 


Tooltips cannot be styled and displayed in tiny text, which can be hard to read. 
Tooltips are displayed after a one-second delay, which annoys users in a hurry, 
but appropriately prevents tips from popping up when the user unintentionally 
passes over them with the mouse. Lastly, tooltips disappear after six seconds, 
which limits the readable length to a brief sentence. 


Firefox 2 only displays the first 75 characters of the title in a tooltip. Other 
browsers display all the text in a title. 


The most natural and accessible place to put a tooltip image is after the text for 
which it provides help. Screen readers always read the image’s alt text, and if the 
image cannot be displayed, a browser displays the alt text. It makes most sense 
for the user to read or hear a tip after reading or hearing the text for which it pro- 
vides extra information. 


Alert, Inline Alert; Inline Elements (Chapter 2); Border (Chapter 6); Image, 
Replaced Text (Chapter 14) 


www. cssdesignpatterns.com/tooltip-alert 
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Popup Alert 


© Popup Alert - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Popup Alert 


A popup can show tips and help. ®© 
A popup can show the definition of a word. 
A popup can preview the target of a link . 


Pro 
CSS and HTML 
Design Patterns 


by Michael Bowers 


* Chapter 1 - Overview 

* Chapter 2 - HTML 

* Chapter 3 - Selectors 

* Chapter 4 - Box Models 

* Chapter 5 - Box Model Extents 
* Chapter $ - Box Model Properties 











HTML 


<h1>Popup Alert</h1> 
<div> 
<p>A popup can show tips and help. 
<span class-"popup-trigger" id-"pti"»«img src-"help.gif" alt="tip" /» 
«span class-"popup medium border"»Popup help goes here.«/span»«/span» 
«br /» 
A popup can show the definition of a 
«dfn class-"popup-trigger" id-"pt2"»word. 
«span class-"popup medium border"»Popup definition goes here.«/span»«/dfn» 
«br /» 
A popup can preview the target of a 
«a class-"popup-trigger" id="pt3" 
href="http://www.cssdesignpatterns.com">link 
<img class="popup border" src="css-design-patterns-preview. jpg” 
alt="cssDesignPatterns.com preview" /></a>.</p></div> 


CSS 


*.popup-trigger { position:relative; } 


* popup { position:absolute; left:0; top:1em; z-index:1; 
padding:5px; text-align:center; } 


*.popup-trigger *.popup { visibility:hidden; } 


/* Nonessential rules are not shown */ 
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Popup Alert 


Problem 


Solution 


Pattern 


Location 


Limitations 


You want to insert a popup to show helpful information to the reader. You want 
the popup to be hidden until the reader moves the mouse over it or clicks it. 

You want the browser to show the popup automatically like a tooltip, and you 
want it to remain showing until the user clicks it or moves the mouse away from 
it. You want an unobtrusive way to show the reader that the popup is present. 
You also want it to be accessible to nonsighted users. You want complete control 
over the style of the popup box, the position of the popup box, and the style of its 
contents. You do not want to insert any JavaScript into the document body. 


You can insert an inline element with the popup-trigger class into your docu- 
ment. In the example, I used «span», «dfn», and «a» elements. When the user 
mouses over or clicks the contents of the popup-trigger element, this triggers the 
browser to display the popup. You can style the popup trigger with 
position:relative so you can position the popup relative to it. 


Inside the popup-trigger element you can insert an inline element to hold the 
popup content. In the example, I use «span» and «img» elements. You can assign 
this element to the popup class. You can absolutely position the popup element to 
remove it out of the normal flow. You can use left:0 and top:1em to position the 
popup immediately below the popup trigger. You can use z- index:1 to make sure 
popups are displayed in front of popup triggers. 


You can use JavaScript libraries to dynamically assign events to popup-trigger 
elements. This keeps the markup in the body completely free from JavaScript. 
See the next page for details. 


HTML 

«INLINE class-"popup-trigger"» TRIGGER CONTENTS 
«INLINE class-"popup"» POPUP CONTENT «/INLINE» 

«/ INLINE» 


CSS 
*.popup-trigger { position:relative; } 
*.popup ( position:absolute; left:0; top:1em; z-index:1; } 


This pattern works inline. 


Internet Explorer 7 (and earlier versions) display popup triggers in front of pop- 
ups. You can solve this problem by laying out your page so that popup triggers 
are displayed on one side and popups are displayed on the other. You can also 
solve this problem by assigning a unique ID to each popup trigger and styling 
each one so that it displays behind the previous one. In the example, I condition- 
ally loaded a stylesheet just for Internet Explorer containing 

ipti ( z-index:3; } 

#pt2 ( z-index:2; } 

#pt3 ( z-index:1; } 


(Continued) 
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Popup Alert (Continued) 


HTML Header 


«head» 
<!-- only script elements are shown --> 


«script language-"javascript" type-"text/javascript" src="yahoo.js"></script> 

«script language-"javascript" type-"text/javascript" src="event.js"></script> 

«script language-"javascript" type-"text/javascript" src="chdp.js"></script> 

«script language-"javascript" type-"text/javascript" src="cssQuery-p.js"></script> 

«script language-"javascript" type-"text/javascript" src="page.js"></script> 
</head> 


page.js 
function initPage() { 
assignEvent( 'click', '*.popup-trigger', 
applyToDescendants, '*.popup', toggleVisibility ); 


assignEvent( 'mouseover', '*.popup-trigger', 
applyToDescendants, '*.popup', showElement ); 


assignEvent( 'mouseout', '*.popup-trigger', 
applyToDescendants, '*.popup', hideElement ); 





} 


addEvent(window, 'unload', purgeAllEvents); 
addEvent(window, 'load', initPage); 


//The functions addEvent() and assignEvents() are in chdp.js. 
//Full documentation for each function is found in the source code. 
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Popup Alert (Continued) 


Problem 


Solution 


Tips 


Example 


Related to 


See also 


To implement popups, you need a way to attach events to HTML elements 
without coding them into the markup. 


Using open source JavaScript libraries, you can dynamically attach events to 
elements. This eliminates event code within markup. 


There are several open source JavaScript libraries that you can use for this 
purpose. I chose two free libraries from Yahoo! that are licensed under a BSD 
license: yahoo. js and event. js. They are available at http: //developer. 
yahoo. com/yui/. 


Ialso use an open source JavaScript library called cssQuery. js from Dean 
Edwards located at http: //dean.edwards .name/. It is freely licensed under 
LGPL 2.1. It allows you to select elements in JavaScript using CSS selectors. 


Ialso provide an open source library called chdp. js freely licensed under a BSD 
license. It provides functions that integrate these other libraries. 


You can use these libraries by attaching each one to your document in the order 
shown in the example. 


You can attach your own JavaScript file to execute code specific to your docu- 
ment. The example names this file page. js and shows its code. The browser 
executes the two addEvent () functions first. The first addEvent() function 
attaches a generic function called purgeAllEvents() to the page's unload event. 
When the page unloads, purgeAllEvents() purges all attached events from 
memory. The second addEvent () function attaches initPage() to the page's 
load event. After the page loads, initPage() assigns events to elements using 
assignEvent(). 


It is easy to use assignEvent() to assign an event to elements. The name of the 
event goes in the first argument (without the "on" prefix). A CSS selector in the 
second argument determines which elements get assigned to the event. You 
can use any CSS 2.1 selector. applyToDescendants() goes in the third argument. 
The CSS selector in the fourth argument selects which descendants of the 
element that generated the event are affected by the helper function in the 
fifth argument. In the example, I use showElement(), hideElement(), and 
toggleVisibility() from chdp. js as helper functions to show, hide, and toggle 
the display of popup elements. 


This is a flexible framework. You can use CSS selectors to apply any event to any 
element, and you can supply your own functions to handle events. 


You could use the Event Styling design pattern in Chapter 17 to change class 
names instead of using showElement(), hideElement(), and toggleVisibility(). 
Unfortunately, Opera 9 has trouble rendering absolute elements when you add 
and remove class names. To avoid this problem, this design pattern directly 
modifies an element' visibility using the DOM. 


The first assignEvents () function in the example assigns the onclick event to all 
popup-trigger elements. When the onclick event fires, applyToDescendants() 
applies toggleVisibility() to each popup descendant of the element that fired 
the event. toggleVisibility() hides an element when it is visible and shows it 
when it is hidden. 


Alert, Inline Alert; Positioned, Closest Positioned Ancestor, Atomic, Absolute, 
Relative (Chapter 7); Left Offset, Top Offset (Chapter 9); Image, Replaced Text 
(Chapter 14); Event Styling, Rollup, Flyout Menu (Chapter 17) 


www. cssdesignpatterns.com/popup-alert 
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Alert 


© Alert - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Alert 


Text above the alert. 


ALERT HEADING 


This is the content of the alert. It contains important 
information you want to point out to the reader. 


Text below the alert. 





HTML 


«hi»Alert«/hi» 
«p»Text above the alert.«/p» 


«div class-"alert tip"> 
«h3»Alert Heading«/h3» 
«p»This is the content of the alert. It contains important information 
you want to point out to the reader. 
</p> 
</div> 


<p>Text below the alert.</p> 


CSS 


* alert { margin:40px; 
padding-left:20px; padding-right: 20px; 
border-top:1px solid black; border-bottom:1px solid black; 
background-color:gold; } 
* alert h3 { font-size:1.3em; } 
*.alert p { letter-spacing:1.5px; line-height:1.5em; } 
*.alert.tip h3 ( text-transform:uppercase; } 





Alert 


Problem 


Solution 


Pattern 


Location 
Options 
Tip 


Related to 


See also 
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You want to insert an alert into your document to point out important informa- 
tion to the reader. You want to separate the alert from surrounding text to make it 
stand out. You want to identify the purpose of the alert to the user and make the 
alert's purpose stand out in contrast to its content. 


An alert consists of a heading and content packaged inside of a division. The 
heading identifies the purpose of the alert as a tip, note, caution, warning, and so 
forth. The content contains the alert's message. You can make the alert stand out 
by using whitespace, borders, backgrounds, and fonts. 


You can use «div class="alert TYPE"> to identify the division as an alert and to 
identify the type of alert. For example, «div class-"alert tip"» identifies the 
division as an alert and identifies the type of alert as a tip. You can use any type 
of block element instead of the division. You can use *.alert to select the entire 
alert for styling. You can chain together class selectors to style specific types of 
alerts, such as *.alert.tip{}. 


You can use «h3» to identify the alert's heading. Since alerts are not as important 
as a main heading or topic headings, you may want to give them a low-level 
heading, such as <h3>. The heading signals to search engines that the alert's con- 
tent is important. The heading typically contains one word, such as "Note," "Tip," 
or “Caution.” You can use *.alert h3{} to select the heading for styling. 


You can use «p» to identify the alert's content. You can use *.alert p{} to select 
the heading for styling. 


HTML 

«div class-"alert TYPE"> 
«h3» ALERT HEADING «/h3» 
«p» ALERT TEXT «/p» 

«/div» 


CSS 

* alert { STYLES } 
.alert h3 ( STYLES } 
.alert p ( STYLES } 
.alert.TYPE — ( STYLES } 
.alert.TYPE h3 ( STYLES Y 
.alert.TVPE p ( STYLES } 


This pattern works anywhere you can use a block element. 


* * * * * 


You can use other types of block elements to mark up the alert. 


If you want to add even more emphasis to the alert, you can embed <em> or 
<strong> inside the paragraph or heading. 


All design patterns in this chapter; Terminal Block Elements, Multi-purpose 
Block Elements (Chapter 2); Subclass Selector (Chapter 3); Margin, Border, 
Padding, Background (Chapter 6); Font (Chapter 10); Spacing, Inline Decoration 
(Chapter 11); Section (Chapter 13) 


www. cssdesignpatterns.com/alert 
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Inline Alert 


© Inline Alert - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Inline Alert 


An inline alert slips right into the flow of text. As such it can be broken across 


lines. ALERT: brief message. You can keep the alert's message 





brief and you can use white-space: nowrap to prevent it from breaking 
across lines. It is also important to make the line height large enough to 
prevent the alert's padding and border from overlapping neighboring lines. 





HTML 


<h1>Inline Alert</h1> 


<p>An inline alert slips right into the flow of text. 
As such it can be broken across lines. 


<span class="alert tip"> 
<strong class="heading">Alert: </strong> 
<em class="content">brief message. </em> 
</span> 


You can keep the alert's message brief and you can use 
<code>white-space:nowrap</code> to prevent it from breaking across lines. 
It is also important to make the line height large enough to prevent the 
alert's padding and border from overlapping neighboring lines. </p> 


CSS 

*.alert ( white-space:nowrap; line-height:2.3em; 
margin:0 20px; padding:8px 20px 5px 20px; 
border-top:1px solid black; border-bottom:1px solid black; 
background-color:gold; } 

*.alert *.heading { font-weight:bold; font-size:1.3em; } 


*.alert *.content { letter-spacing:1.5px; font-style:normal; } 


*.alert.tip *.heading { text-transform:uppercase; } 
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Inline Alert 


Problem 


Solution 


Pattern 


Location 


Options 


Related to 


See also 


You want to insert an alert into the inline flow of your document. You also want 
the inline alert to work just like a block alert. 


An inline alert consists of an inline heading and inline content packaged inside a 
span. The inline heading identifies the purpose of the alert as a tip, note, caution, 
warning, and so on. The inline content contains the alert's message. The inline 
alert works just like the Alert design pattern; the only difference is elements are 
inline. You can make the alert stand out by displaying it as a block, and using 
whitespace, borders, backgrounds, and fonts. 


You can use «span class-"alert TYPE"» to identify the span element as an 

alert and to identify the type of alert. For example, «span class-"alert tip"> 
identifies the span as an alert and identifies the type of alert as a tip. This works 
just like the Alert design pattern except we are using a span instead of a division. 
You can use *. alert to select the entire alert for styling. You can chain together 
class selectors to style specific types of alerts, such as *.alert.tip{}. 


You can use «strong class-"heading"» to identify the alert's heading. Heading 
elements cannot be used inline because they are block elements. «strong» is a 
good substitute because it indicates strongly emphasized text. The heading text 
is typically one word, such as "Note," "Tip," or "Caution." You can use *.alert 
*.heading(] to select the heading for styling. 


You can use «em class-"content"» to identify the alert's content. You can use 
*.alert *.content{} to select the heading for styling. 


HTML 

«span class-"alert TYPE"» 
«strong class-"heading"» ALERT HEADING: «/strong» 
«em class-"content"» ALERT TEXT «/em» 

</span> 


CSS 
*.alert ( white-space:nowrap; line-height:+VALUE; } 


*.alert *.heading ( STYLES ] 
* alert *.content { STYLES } 


* alert. TYPE { STYLES } 
* alert. TYPE *.heading { STYLES } 
* alert.TYPE *.content { STYLES } 


This pattern works anywhere you can use an inline element, and it can be reli- 
ably floated and positioned. 


You can use display:block to render an inline alert exactly as if it were a block 
alert. This is useful when you have to mark up an alert within an inline context, 
but want it to look like a block alert. 


Alert, JavaScript Alert, Tooltip Alert, Popup Alert; Inline Elements (Chapter 2); 
Subclass Selector (Chapter 3); Inline Box (Chapter 4); Spacing, Nowrap 
(Chapter 11) 


www. cssdesignpatterns.com/inline-alert 
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Hanging Alert 


© Hanging Alert - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Hanging Alert 


Text above the alert. 





TIP The Hanging Alert uses the Hanging Indent design 
pattern to hang the heading to the left and pad the 
content to the right. The Inline Decoration design pattern 
optionally decorates the Alert's heading. 


Text below the alert. 





HTML 


«hi»Hanging Alert</h1> 
<p>Text above the alert.</p> 


<div class="alert tip"> 
«h3»«span class="decoration">&nbsp;</span>Tip</h3> 
<p>The Hanging Alert uses the Hanging Indent design pattern to hang the 
heading to the left and pad the content to the right. The Inline Decoration 
design pattern optionally decorates the Alert's heading.</p> 
</div> 
<p>Text below the alert.</p> 


CSS 


* alert { padding-right:20px; padding-top:10px; padding-bottom: 10px; 
border-top:1px solid black; border-bottom:1px solid black; margin: 40px; } 


* alert h3 { display:inline; font-size:1.3em; text-transform:uppercase; } 


*.alert.tip { text-indent:-80px; padding-left:80px; } 
*.alert.note { text-indent:-110px; padding-left:110px; } 
*.alert.caution { text-indent:-160px; padding-left:160px; } 


*.alert.tip p { display:inline; margin-left:18px; } 
*.alert.note p { display:inline; margin-left:20px; } 
*.alert.caution p { display:inline; margin-left:20px; } 


*.alert *.decoration { border-left:15px solid gold; margin-right:-10px; 
font-size:0.7em; vertical-align:2px; } 
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Hanging Alert 


Problem 


Solution 


Pattern 


Location 
Advantages 
Disadvantages 


Example 


Related to 


See also 


You want to insert a hanging alert into your document. You want its heading 
to be moved to the left and its content to the right. You want to adjust the 
indent to fit different types of alerts. You do not want to insert extra markup. 


You can use the Alert design pattern to mark up the alert. You can style 

the alert using the Hanging Indent design pattern (Chapter 12). You can 
optionally use the Inline Decoration design pattern (Chapter 11) to decorate 
the alert's heading. 


To create a hanging indent, the alert's heading and paragraph need to be 
displayed as inline blocks. This puts them in the same inline formatting 
context. You can then use a positive value in padding-left to indent all the 
text in the heading and the paragraph to the right. You can use a negative 
value in text-indent to move the first line into the left padding area by an 
equal amount. For example, if you use padding-left:100px, you should use 
text-indent:-100px. Lastly, the first line of the paragraph needs to be moved 
to the right so that it lines up with the left indentation of the rest of its lines. 
You can select the paragraph and use margin-left to move the first line into 
alignment. Because the paragraph is displayed inline, margin-left only 
affects the beginning of the paragraphss first line. 


HTML 

«div class-"alert TYPE"> 
«h3» ALERT HEADING «/h3» 
«p» ALERT TEXT </p> 

«/div» 


CSS 
*.alert ( ANY STYLES ) 
*.alert h3 { display:inline; } 


*.alert.TYPE ( display:inline; 
text-indent: -INDENT; 
padding-left:+INDENT; } 


*.alert.TYPE p { display:inline; margin-left:+VALUE; } 


This pattern works anywhere you can use a block element, and it can be reli- 
ably floated and positioned. 


Because the properties used by this pattern are simple, they are well sup- 
ported by every major browser. 


You have to play with margin-left until you are satisfied it aligns the para- 
graphs text. The exact value depends mainly on the headings font. 


The example shows how you can use different selectors to adjust the hanging 
indent for different types of alerts. When you change the type of alert, the 
hanging indent changes too. 


Alert; Offset Static (Chapter 8); Inline Decoration (Chapter 11); Hanging 
Indent (Chapter 12); Inlined (Chapter 13) 


www. cssdesignpatterns.com/hanging-alert 
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Graphical Alert 


Graphical Alert - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Graphical Alert 


Text above the alert. 


The Graphical Alert design pattern combines the Left 
Marginal design pattern and the Text Replacement design 
pattern to display a graphic on top of the heading. 


Text below the alert. 





HTML 


<h1>Graphical Alert</h1> 
<p>Text above the alert.</p> 


<div class="alert tip"> 
<h3><em>Tip</em><span></span></h3> 
<p>The Graphical Alert design pattern combines the Left Marginal design pattern 
and the Text Replacement design pattern to display a graphic 
on top of the heading.</p></div> 


<p>Text below the alert.</p> 


CSS 


*.alert ( position:relative; margin:20px 0 20px 120px; } 

* alert h3 { margin:10px 0; font-weight:bold; font-size:1.3em; 
text-transform:uppercase; } 

*.alert p { margin:10px 0; } 


*.alert.tip p ( color:green; border:4px ridge green; padding:20px; } 


* 
£D 


lert.tip h3 ( position:absolute; left:-100px; top:-15px; 
width:71px; height:117px; padding:0; overflow:hidden; ] 


*.alert.tip h3 em ( position:absolute; left:20px; top:25px; ] 





*.alert.tip span { position:absolute; left:0; top:0; margin:0; 
width:71px; height:117px; background:url("tip.jpg") no-repeat; ] 
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Graphical Alert 


Problem 


Solution 


Pattern 


Location 


Related to 


See also 


You want to insert an alert into your document with a graphical heading on the 
left and content on the right. You want the heading text to be shown in case the 
browser cannot display the image. You want screen readers to read the heading 
text. You do not want to embed an image in the HTML because the image is style, 
not content. 


You can combine the Left Marginal design pattern with the Text Replacement 
design pattern (Chapter 10) to create the graphical alert. 


You can insert an empty span into the alert’s heading. You can add the rules 
from the Text Replacement design pattern using the selectors shown in the pat- 
tern that follows. You can replace TYPE in the pattern with the class name 

that identifies the type of alert, such as tip, note, or caution. This allows you to 
use different images for different types of alerts. For example, you could use a 
star image for a tip and an exclamation image for a caution. You can replace 
IMAGE_WIDTH and IMAGE_HEIGHT in the pattern with the width and height of the 
image. You can replace FILE.EXT in the pattern with the file name of the image. 


You can optionally select the embedded «em» to position the heading. This allows 
you to control exactly where the heading is positioned independent from the 
graphic. If the graphic cannot be displayed, the heading will be right where you 
want it. You can choose any position as long as the graphic is large enough to 
cover up the heading in this position. 


HTML 

«div class-"alert TYPE"» 
«h3»«em» ALERT HEADING «/em»«span»«/span»«/h3» 
«p» ALERT TEXT «/p» 

«/div» 


CSS 
Use the same selectors and styles as the Alert design pattern plus the following: 


*.alert.TYPE h3 em ( position:absolute; left:20px; top:25px; } 


*.alert.TYPE h3 { position:absolute; left:-VALUE; top:+VALUE; 
width:IMAGE WIDTH; height:IMAGE HEIGHT; 
padding:0; overflow:hidden; } 


*.alert.TYPE span ( position:absolute; left:0; top:0; margin:0; 
width:IMAGE WIDTH; height:IMAGE HEIGHT; 
background:url("FILE.EXT") no-repeat; } 


This pattern works anywhere you can use a block element. 


Width, Height, Sized (Chapter 5); Margin, Border, Padding, Background, Over- 
flow (Chapter 6); Positioned, Closest Positioned Ancestor, Absolute, Relative 
(Chapter 7); Text Replacement (Chapter 10); Left Marginal (Chapter 13) 


www. cssdesignpatterns.com/graphical-alert 
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Run-in Alert 


© Run-in Alert - Mozilla Firefox 
Eile Edit View Go Bookmarks Tools Help 


Run-in Alert 


Text above the alert. 








CAUTION The Run-in Alert runs the alert's heading into the text 
using display:inline on both the heading and the paragraph. 








Text below the alert. 





HTML 


<hi>Run-in Alert</h1> 
<p>Text above the alert.</p> 


<div class="alert caution"> 
<h3><span class-"decoration"»8nbsp;«/span»Caution«/h3» 
<p>The Run-in Alert runs the alert's heading into the text using 
«code»display:inline«/code» on both the heading and the paragraph.</p> 
«/div» 


<p>Text below the alert.</p> 


CSS 


*.alert ( padding-right:20px; padding-top:10px; padding-bottom:10px; 
border-top:ipx solid black; border-bottom:1px solid black; margin:40px; } 


* 


.alert h3 { display:inline; font-size:1.3em; text-transform:uppercase; ] 


* 


.alert p ( display:inline; margin-left:10px; letter-spacing:-0.8px } 


* 


.alert.caution { color:red; 
border-top:3px double red; border-bottom:3px double red; } 


* 


.alert *.decoration ( border-left:15px solid gold; 
margin-right:-11px; font-size:0.7em; vertical-align:2px; } 
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Run-in Alert 


Problem 


Solution 


Pattern 


Location 


Advantages 


Example 


Related to 
See also 


You want to insert an alert into your document where the alert's heading runs 
into the alert's paragraph. 


You can use the Alert design pattern to mark up the alert. You can use the Run-in 
design pattern to get the heading to run into the paragraph by styling the head- 
ing and the paragraph with display: inline. As pointed out in the Run-in design 
pattern discussion in Chapter 13, CSS provides the rule display:run-in for this 
purpose, but only Opera, Safari, and Konquerer support it. Thus, we have to use 
the Run-in design pattern instead. Lastly, you can optionally use the Inline Deco- 
ration design pattern (Chapter 11) to decorate the alert's heading. 


HTML 

«div class-"alert TYPE"> 
«h3» ALERT HEADING «/h3» 
«p» ALERT TEXT «/p» 
«/div» 


CSS 

* alert ( ANY STYLES ) 
*.alert h3 ( display:inline; ) 
*.alert p ( display:inline; } 


This pattern works anywhere you can use a block element, and it can be reliably 
floated and positioned. 


Because the properties used by this pattern are simple, they are well supported 
by every major browser. 


This pattern is closely related to the Inline Alert design pattern because it dis- 
plays the heading and paragraph inline. If you want the Inline Alert design 
pattern to be styled like the Run-in pattern, simply do not assign display:block 
to its «span class-"heading"» and «span class-"content"» elements. The main 
advantage of the Run-in Alert over the Inline Alert design pattern is that «h3» and 
«p» have more semantic meaning than spans. 


In the example, I used the selector *.alert.caution to turn the text and borders 
red when the class of the alert is caution. I also inserted the Inline Decoration 
design pattern into the heading to give it more emphasis. In this case, the Inline 
Decoration consists of the «span class-"decoration"» &nbsp;</span> styled 
with a gold left border. 


Inline Alert; Inline Decoration (Chapter 11); Inlined, Run-in (Chapter 13) 


www.cssdesignpatterns.com/run-in-alert 
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Floating Alert 


© Floating Alert - Mozilla Firefox 
File Edit View Go Bookmarks Tools Help 


Floating Alert 


Text above the alert. 


eee Pere ME ee The Floating Alert design 


Notice how the alert is removed pattern floats the entire 
from the flow. Also notice how the alert. Internally it also 
browser automatically shrinks the floats the alert's heading to 
right margin of this text so that it the left and its paragraph 
does not collide with the left margin to the right. 

of the floated alert. 








HTML 


<hi>Floating Alert</h1> 
<p>Text above the alert.</p> 


<div class="alert note"> 
<h3><span class="decoration">&nbsp;</span>Note</h3> 
<p>The Floating Alert design pattern floats the entire alert. Internally it also 
floats the alert's heading to the left and its paragraph to the right.</p> 
</div> 
<p>Text below the alert.</p> 
<p>Notice how the alert is removed from the flow. Also notice how the browser 
automatically shrinks the right margin of this text so that it does not 
collide with the left margin of the floated alert.</p> 





CSS 


* alert { float:right; width:350px; margin-left: 20px; 
border-top:1px solid black; border-bottom:1px solid black; } 


* alert h3 { float:left; width:50px; margin:10px 0; 
font-size:1.3em; text-transform:uppercase; } 


*.alert p { float:right; width:250px; margin:10px 0; } 


* alert.note ( color:blue; 
border-top:2px groove blue; border-bottom:2px ridge blue; } 


* alert *.decoration { border-left:15px solid gold; 
margin-right:-11px; font-size:0.7em; vertical-align:2px; } 
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Floating Alert 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Example 


Options 
Related to 


See also 


You want to insert a floating alert into your document. 


You can use the Alert design pattern to mark up the alert. You can use the 
Float and Clear design pattern (Chapter 7) to float the alert. You can use the 
Opposing Floats design pattern (Chapter 17) to float the alert's heading to 
the left and its paragraph to the right. 


HTML 

«div class-"alert TYPE"> 
«h3» ALERT HEADING «/h3» 
«p» ALERT TEXT </p> 

«/div» 


CSS 

*.alert ( float:LEFT OR RIGHT; width:+VALUE; margin:+VALUE; } 
*.alert h3 { float:left; width:+VALUE; margin:+VALUE; } 
*.alert p { float:right; width:+VALUE; margin:+VALUE; } 


This pattern works anywhere you can float a block element. 


The browser automatically calculates the positions of floats, dynamically 
sizes their height, and dynamically moves text and other floats out of the way. 
When the display is narrow, floats get pushed down. This makes the layout 
very flexible and adaptive to the user’s environment. It is easy to control the 
general position of a float by floating it left or right and by placing margins 
around it. If you need finer control, you can also relatively position a float 
and offset it using left, right, bottom, and top. 


The main disadvantage to this design pattern is that you cannot float the 
heading and paragraph without floating the division as well. The browser 
removes floats from the normal flow. If you float a child, you also have to 

float its parent if you want to keep them together. 


Floats trigger bugs in browsers and are not well supported in minor browsers. 
It is difficult to control the precise position of a float. Its vertical position is 
roughly located at its nonfloated vertical position in the flow. Its horizontal 
position is the inner-left or inner-right side of its parent’s container, or 
stacked next to or below a previously floated element. 


In the example, I used the selector *. alert .note to turn the text and borders 
blue when the class of the alert is note. I also inserted the Inline Decoration 
design pattern (Chapter 11) into the heading to give it more emphasis. In 
this case, the inline decoration consists of the <span class="decoration"> 
&nbsp; </span> styled with a gold left border. 


You can easily float an inline alert following these same techniques. 


Alert; Inline Alert; Float and Clear (Chapter 7); Offset Float (Chapter 8); 
Inline Decoration (Chapter 11); Opposing Floats (Chapter 17) 


www.cssdesignpatterns.com/floating-alert 
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Left Marginal Alert 


© Left Marginal Alert - Mozilla Firefox 
Ele Edit View History Bookmarks Tools Help 


Left Marginal Alert 


Text above the alert. 


TIP The Left Marginal Alert design Text below the alert. 
pattern moves the entire 
alert into the left margin. Notice how the alert is removed 
Inside the alert itself, its from the flow and moves into the 
heading is absolutely margin. Unlike the Floating Alert, 
positioned to the left and its you have to size the right or left 
paragraph to the right. margin to make room for the 

marginal alert. 





HTML 


«hi»Left Marginal Alert«/hi» 


«div class-"main"» 
«p»Text above the alert.«/p» 
«div class-"alert tip"> 
<h3><span class="decoration">&nbsp;</span>Tip</h3> 
<p>The Left Marginal Alert design pattern moves the entire alert into the 
left margin. Inside the alert itself, its heading is absolutely positioned 
to the left and its paragraph to the right.</p> 
</div> 
<p>Text below the alert.</p> 
«p»Notice how the alert is removed from the flow and moves into the margin. 
Unlike the Floating Alert, you have to size the right or left margin 
to make room for the marginal alert.«/p» 
«/div» 


CSS 


*.main ( position:relative; margin-left:400px; } 
*.alert ( position:absolute; width:350px; left:-400px; height:190px; 
border-top:ipx solid black; border-bottom:1px solid black; } 
*.alert h3 ( position:absolute; left:0; top:15px; margin:0; 
font-size:1.3em; text-transform:uppercase; } 
*.alert p ( position:absolute; left:80px; top:i5px; margin:0; } 
*.alert.tip ( color:green; 
border-top:4px groove green; border-bottom:4px ridge green; } 
*.alert *.decoration ( border-left:15px solid gold; 
margin-right:-11px; font-size:0.7em; vertical-align:2px; } 


CHAPTER 20 ALERTS 


Left Marginal Alert 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Related to 


See also 


You want to insert an alert into the left margin of your document. 


You need to create a wide margin on the left in which to put the alert. You 
can use the Alert design pattern to mark up the alert. You can use the Left 
Marginal design pattern (Chapter 13) to move the alert into the margin. You 
can use the Offset Absolute and Offset Fixed design pattern (Chapter 8) to 
vertically position the alert and the Left Aligned design pattern (Chapter 9) 
to horizontally position the alert. You can use the Left Offset and Top Offset 
design patterns (Chapter 9) to position the heading and the paragraph. 


HTML 
«div class-"main"» 
«div class-"alert TYPE"» 
«h3» ALERT HEADING «/h3» 
«p» ALERT TEXT «/p» 
«/div» 
«/div» 


CSS 
*.main ( position:relative; margin-left:MARGIN; } 


*.alert ( position:absolute; width:«A WIDTH; left:-A WIDTH; 
height:+VALUE; } 


* alert h3 { position:absolute; left:0; top:TOP OFFSET; 
margin:0; } 


*.alert p { position:absolute; left:+VALUE top:TOP OFFSET; 
margin:0; j 


- Use margin-left:MARGIN to create a left margin in the main block element 
that contains the alert and use position relative to position it. 

- Set the alert, its heading, and its paragraph to position:absolute. 

- Set width:A WIDTH to less than MARGIN so the alert will fit in the margin. 

- Optionally set height :+VALUE to the height you want the alert to be. This is 
only necessary if you are using border-bottom to render a bottom border. 

- Move the alert into the margin by setting left to the negative of A WIDTH. 

- Use left:0 to move the heading to the left side of the alert. 

- Use left:+VALUE to offset the paragraph to the right of the heading. 

- Use top: TOP OFFSET to offset the top of the heading and paragraph from the 
top of the alert. 

- Usemargin:0 to clear the default heading and paragraph margins. 

- Note that the paragraph defaults to width:auto, which automatically sizes 
the paragraph to fit within the width of the alert. 


This pattern works anywhere you have a wide left margin. 


You have complete control over the positioning of the alert. Also, the alert is 
placed outside the border of its parent. See Right Marginal Alert to place the 
alert inside the border. 


You need to ensure there is enough vertical space between marginal elements 
to prevent them from overlapping. Absolute positioning does not adapt as 
well to various devices as does the Fluid Layout design pattern (Chapter 17). 


Alert, Inline Alert, Right Marginal Alert; Offset Absolute and Offset Fixed 
(Chapter 8); Left Aligned, Left Offset, Top Offset (Chapter 9); Inline Decora- 
tion (Chapter 11); Left Marginal (Chapter 13) 


www. cssdesignpatterns.com/left-marginal-alert 
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Right Marginal Alert 


© Right Marginal Alert - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


Right Marginal Alert 
Text above the alert. 
Text below the alert. 


Notice how the alert is removed 
from the flow and moves into the 
margin. Unlike the Floating Alert, 
you have to size the right or left 
margin to make room for the 
marginal alert. 


HTML 


<div class="main"> 
<p>Text above the alert.</p> 


<div class="alert tip"> 





The Right Marginal Alert 


design pattern moves the 
entire alert into the right 
margin. Inside the alert 
itself, its heading is 
absolutely positioned to the 
left and its paragraph to the 
right. 


<h3><span class="decoration">&nbsp;</span>Tip</h3> 

<p>The Right Marginal Alert design pattern moves the entire alert into the 
right margin. Inside the alert itself, its heading is absolutely positioned 
to the left and its paragraph to the right.«/p» 


</div> 


<p>Text below the alert.</p> 


«p»Notice how the alert is removed from the flow and moves into the margin. 
Unlike the Floating Alert, you have to size the right or left margin 


to make room for the marginal alert.</p> 


</div> 


CSS 


*.main ( position:relative; padding-right:400px; } 

*.alert { position:absolute; width:350px; right:0; height:190px; 
border-top:1px solid black; border-bottom:1px solid black; j 

*.alert h3 ( position:absolute; left:0; top:15px; margin:0; 
font-size:1.3em; text-transform:uppercase; } 

*.alert p ( position:absolute; left:80px; top:i5px; margin:0; } 


*.alert.tip ( color:green; 


border-top:4px groove green; border-bottom:4px ridge green; } 
*.alert *.decoration ( border-left:15px solid gold; 
margin-right:-11px; font-size:0.7em; vertical-align:2px; } 
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Right Marginal Alert 


Problem 


Solution 


Pattern 


Location 


Advantages 


Disadvantages 


Related to 


See also 


You want to insert an alert into the right margin of your document. 


You need to create a wide margin on the right in which to put the alert. You 
can use the Alert design pattern to mark up the alert. You can use the Right 
Marginal design pattern to move the alert into the right margin. You can use 
the Offset Absolute and Offset Fixed design pattern (Chapter 8) to vertically 
position the alert and the Right Aligned design pattern (Chapter 9) to hori- 
zontally position the alert. You can use the Left Offset and Top Offset design 
patterns (Chapter 9) to position the heading and the paragraph. 


HTML 
«div class-"main"» 
«div class-"alert TYPE"» 
«h3» ALERT HEADING «/h3» 
«p» ALERT TEXT «/p» 
«/div» 
«/div» 


CSS 
*.main ( position:relative; padding-right:MARGIN; } 


*.alert ( position:absolute; width:A WIDTH; right:0; 
height:+VALUE; } 


* alert h3 { position:absolute; left:0; top:TOP OFFSET; 
margin:0; } 


*.alert p { position:absolute; left:+VALUE top:TOP OFFSET; 
margin:0; j 


- Use padding-right:MARGIN to create a right "margin" in the main block ele- 
ment that contains the alert and use position relative to position it. 

- Set the alert, its heading, and its paragraph to position:absolute. 

- Set width:A WIDTH to less than MARGIN so the alert will fit in the “margin.” 

- Optionally set height :+VALUE to the height you want the alert to be. This is 
only necessary if you are using border-bottom to render a bottom border. 

- Use right:0 to move the alert into the “margin” of the main block. 

- Use left:0 to move the heading to the left side of the alert. 

- Use left:+VALUE to offset the paragraph to the right of the heading. 

- Use top: TOP OFFSET to offset the top of the heading and paragraph from the 
top of the alert. 

- Usemargin:0 to clear the default heading and paragraph margins. 

- Note that the paragraph defaults to width:auto, which automatically sizes 
the paragraph to fit within the width of the alert. 


This pattern works anywhere you have a wide right padding. 


You have complete control over the positioning of the alert. Also, the alert is 
placed within the border of its parent. See Left Marginal Alert to place the 
alert outside the border. 


You need to ensure there is enough vertical space between marginal elements 
to prevent them from overlapping. Absolute positioning does not adapt as 
well to various devices as does the Fluid Layout design pattern (Chapter 17). 


Alert, Inline Alert, Left Marginal Alert; Offset Absolute and Offset Fixed (Chap- 
ter 8); Left Offset, Right Aligned, Top Offset (Chapter 9); Inline Decoration 
(Chapter 11); Right Marginal (Chapter 13) 


www. cssdesignpatterns.com/right-marginal-alert 
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Symbols 

\ (backslash), 9 

{} (curly braces), 9 

@import statement, 7 

; (semicolon), 9 

* (universal selector), 14, 61 


A 


<a> element, 407 
Absolute Box design pattern, 90-91 
absolute boxes 
positioning, 123 
stretching, 97-99 
Absolute design pattern, 3-4 
absolute elements, 91 
aligned and offset, 166-167 
aligned outside, 171 
aligned-center, 168-169 
margins, 109 
sizing, 101, 185, 195, 197 
absolute positioning model, 123-125, 
136-137 
Accessible Tables design pattern, 317 
addClass() function, 389, 401 
addEvent() function, 387—388, 463 
<address> element, 49 
Alert design pattern, 455, 464-465 
alert() function, 457 
alerts, 455 
basic, 464—465 
floating, 474-475 
graphical, 470-471 
hanging, 468-469 
inline, 466-467 
JavaScript, 456-457 
left marginal, 476-477 
popup, 460-463 
right marginal, 478-479 
run-in, 472-473 
tooltip, 458-459 
Aligned and Offset Absolute design pattern, 
166-167 
Aligned and Offset Static Block design 
pattern, 162-163 


Aligned and Offset Static Table design 
pattern, 164-165 
Aligned Drop Cap design pattern, 417-419 
Aligned Outside design pattern, 170-171 
Aligned Static Inline design pattern, 160-161 
Aligned-Center Absolute design pattern, 
168-169 
alignment, 147 
advanced example, 252-253 
bottom-aligned, 190-191 
center-aligned, 182-183 
contexts, 245, 251 
hanging indents, 240 
horizontal-aligned, 242-243 
images, 285 
indenting text, 238-239 
left-aligned, 174-175 
middle-aligned, 194-195 
nested, 250-251 
outside, 170-171 
right-aligned, 178-179 
static inline, 160-161 
top-aligned, 186-187 
vertical offset, 246-247 
vertical-aligned, 244—245 
almost-standards mode, 41 
alt attribute, 285 
alt text, 37 
alternate stylesheets, 43 
ancestors, stacking context and, 131 
applyToChildrenOfAncestorWithClass() 
function, 389, 393, 401 
applyToDescendants( function, 388-389 
applyToThis() function, 388-389, 393, 401 
area elements, 287 
assignEvent() function, 387-389, 393, 401, 
405, 463 
Atomic design pattern, 123, 132-133 
attribute existence selector, 65 
attribute selectors, 14, 64-67 
attribute value selector, 65 
attribute word selector, 65 
auto-width columns, 344 
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INDEX 


background-image:url(), 12 
Background Bulleted design pattern, 255, 
264-265 
background color, 115, 201-203 
Background design pattern, 107, 114-115 
background images 
as bullets, 255, 264-265 
combining multiple, 298-301 
fade-out, 288-289 
gradient, 289 
highlighting, 203 
placing text on top of, 296-297 
rounded corners, 310-313 
semi-transparent, 290-291 
styling alternate row, 337 
table, 321 
background property, 3, 81, 319 
background-color property, 75, 115 
background-color:rgb() property, 11 
background-color:white property, 11 
background-color:WindowInfoBackground, 
11 
background-image property, 75, 115, 205 
background-position property, 115 
background-repeat property, 12 
backslash (\), 9 
baseline stylesheet, 28-29 
Basic Shadowed Image design pattern, 283, 
302-303 
bitcons, 300 
block boxes, 86-87, 97 
Block Quote design pattern, 437, 448 
block quotes, 49 
Block Space Remover design pattern, 255, 
276-277 
Block Spacer design pattern, 255, 274-275 
Blocked design pattern, 215, 218-219 
blocked padded content, 227 
blocks, 37, 255 
aligned and offset static, 162-163 
block spacer between, 274-275 
bulleted lists, 264-265 
changing space between, 259, 276-277 
collapsed margins between, 268-269 
content in, 51 
defining structure with, 256-259 
displayed as inline elements, 266-267 
displaying inline elements as, 218-219 
floating, 143 
horizontal rules between, 272-273 


left marginal, 278-279 
lists, 262-263 
normal flow of, 87 
overflow, 87 
rendering as tables, rows, and columns, 
338-339 
right marginal, 280-281 
run-in, 270-271 
sections, 260-261 
static. see static blocks 
terminal, 87 
for visual structure, 258-259 
«body» element, 37, 129 
Border design pattern, 107, 110-111 
border property, 12 
boxes, 81—93, 107, 110-111 
tables, 319, 325 
for underlines and overlines, 205 
border-collapse property, 81, 89, 327 
borders 
between tables and cells, 324-325 
collapsed, 326-329 
fixed measurements for, 377 
merged, 329 
Bottom Aligned design pattern, 190-191 
Bottom Offset design pattern, 192-193 
bottom property, 91, 127 
Box Model design pattern, 77, 80-81 
absolute box, 90-91 
block box, 86-87 
extents, 95-105 
floated box, 92-93 
height property, 98-99 
inline box, 82-83 
inline-block box, 84-85 
shrinkwrapped, 102-103 
sized elements, 100-101 
stretched, 99, 104-105 
table box, 88-89 
width property, 96-97 
Box Model properties, 81, 107-121 
background, 107, 114-115 
border, 107, 110-111 
margin, 107-109 
overflow, 107, 116-117 
padding, 107, 112-113 
page break, 107, 120-121 
visibility, 107, 118-119 
boxes. See also Box Model design pattern 
outside-in, 374-377 
rounded corners, 310-313 
shrinkwrapping, 97-99 


stacking, 123 
types of, 77, 81 

«br /» element, 233 

breadcrumb links, 411-413 

breaks, structural, 259 

browsers 
floats and bugs in, 155 
implementation of CSS rules by, 1 
use of DOCTYPE by, 41 

bulleted lists, 263-265 

bullets 
background images as, 255, 264-265 
placement of list, 264-265 

button class, 409 

Button design pattern, 406-409 

«button» element, 407 


C 


cached files, to boost performance, 28 
callout class, 439 
callouts, 437 
center, 442—443 
left floating, 438—439 
left marginal, 444-445 
right floating, 440-441 
right marginal, 446-449 
«caption» element, 49 
cascading rules, 14-17 
Cascading Style Sheets. See CSS 
case attribute, 201 
case sensitivity, 9, 39, 61 
cell property, 23 
cells 
borders between, 324-325 
collapsed borders between, 326-327 
hidden and removed, 330-331 
padding, 89 
selecting, 322-323 
style inheritance by, 321 
type of width assigned to, 344 
vertically-aligned data in, 334-335 
width of, 347 
cellspacing attribute, 325, 327 
Center Aligned design pattern, 182-183 
Center Callout design pattern, 437, 442-443 
Center Offset design pattern, 184-185 
chained classes, 71 
changelt() function, 409 
chdp.js, 387—389, 463 
child elements 
relation to parent elements, 47 
visual inheritance, 75 


INDEX 


child selector, 63 

class selectors, 14, 60-61 

classes 
assigning multiple, 9, 61 
attributes, 54-55, 71 
chained, 71 
names, 9, 61 

classid attribute, 37 

clear positioning model, 142-143 

clear property, 22 

clear:both property, 381 

closest positioned ancestor, 128-129 

cm (centimeters), 24 

«code» element, 225 

Code design pattern, 215, 224-225 

«col» element, 47, 321 

<colgroup> element, 47, 321 

Collapsed Borders Design pattern, 317, 

326-327 
Collapsed Margins design pattern, 255, 
268-269 

color 
attribute, 201 
background, 115, 201, 203 
highlight, 203 

color property, 12, 201 

color:black property, 11 

colspan attribute, 319 

Column Width design pattern, 344, 346-347 

columns/column layouts 
algorithms for sizing, 344 
auto-width, 344 
content-proportioned, 352-353 
equal content-sized, 360-361 
equal-sized, 362-363 
flex, 366-367 
fluid layout, 373 
grouping, 320-321 
inverse-proportioned, 358-359 
mixed column layouts, 368-369 
percentage-proportioned, 356-357 
removed and hidden, 332-333 
rendering regular elements as, 338-339 
selecting, 322-323 
shrinkwrapped, 348-349 
sized, 350-351 
size-proportioned, 354-355 
types of, 343-344 
undersized, 364-365 
using, 344 
width, 344—347 

comments, syntax for, 10 
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competing rules, cascading order, 14-17 
computer code, 224-225 
conditional stylesheet, 44—45 
confirmIt() function, 409 
constant values, 9 
content 
aligning, 160—161. see also alignment 
within blocks, 51 
center-aligned, 183 
horizontal-aligned, 242-243 
horizontal spacing, 228-229 
inline, 133, 158-159 
left-aligned, 175 
over images, 283, 294-297 
overflows, 116-117 
padding, 226-227 
right-aligned, 179 
separating from style, 387 
spacing, 216-217 
vertical-aligned, 244-245 
content layout property, 22 
Content over Background Image design 
pattern, 283, 296-297 
Content over Image design pattern, 283, 
294-295 
content type, vs. DOCTYPE, 40 
Content-proportioned Columns design 
pattern, 344-345, 352-353 
controls, 53 
CSS (Cascading Style Sheets) 
case sensitivity, 9 
comments, 10 
learning, 1 
polymorphism, 1 
reusability, 415 
rule implementation, 1 
syntax, 8-14 
troubleshooting, 26-27 
whitespace in, 10 
CSS properties, 19 
common, 20-21 
content, 21 
layout, 22 
specialized, 23 
CSS selectors, 371, 387 
adding events to elements using, 388-389 
attribute, 64-67 
class, 60-61 
group, 62-63 
ID, 60-61 
overrides, 61 
position, 62-63 


pseudo-class, 68-69 

pseudo-element, 66 

selecting elements in JavaScript using, 

463 

subclass, 70-71 

type, 60-61 
CSS Sprite design pattern, 283, 298-301 
cssQuery.js, 387, 463 
curly braces {}, 9 


D 
data 

nontabular, 373 

relational, 257 
data-entry forms, 51 
<dd> element, 47, 51 
decorations, inserting into line, 230-231 
default styles, inline elements, 53 
definition lists, 47 
definition terms, 49 
definitions, 51 
descendant selector, 63 
design patterns. See also specific patterns 

combining, 3-7 

purpose of, 2 

using, 2-7 
display property, 77-81 
display:-moz-inline-box, 85 
display:block, 79, 467 
display:inline, 79, 267, 271, 473 
display:inline-block, 79, 85 
display:list-item, 79, 263 
display:none, 79, 273, 331, 333 
display:run-in, 271, 473 
display:table, 339 
display:table-cell, 339 
display:table-row, 339 
«div class=“alert TYPE”>, 465 
«div» element, 47, 51, 55 
dividers/divisions, 47, 51, 261 

float, 380—381 

hierarchy of, 257 
«dl» element, 47 
DOCTYPE, 40-41 

vs. content type, 40 

XHTML, 39 
document structure. See structure 
Document Type Definition (DTD), 41 
documents 

linking stylesheets to, 43 

page breaks in, 107, 120-121 


drop caps, 417 
aligned, 418-419 
first-letter, 420-421 
floating, 426-427 
floating graphical, 428-429 
hanging, 422-423 
marginal, 430-431 
marginal graphical, 432-435 
padded graphical, 424—425 

«dt» element, 47, 49 

dynamic alerts, 455 


E 


element selectors, rule priority and, 14 
elements 
absolute, 91, 136-137, 185, 195, 197 
aligned outside, 170-171 
assigning multiple classes to, 9, 61 
attaching events to, 386—389, 463 
background, 107, 114-115 
changing browser rendering of, 79 
closest positioned ancestor, 128-129 
fixed-position, 139 
fixed-width, 97 
flow, 53 
hiding, 107, 118-119 
inline. see inline elements 
indenting, 148-149 
layering, 75 
moving to left margin, 278-279 
moving to right margin, 280-281 
names, 9 
offset. see offset elements 
positioned, 126-127 
positioning in normal flow, 135 
relative, 141, 159 
removing from normal flow, 143 
replaced, 53, 85, 101 
setting height of, 99 
setting width of, 97 
shrinkwrapped, 102-103, 175, 179, 187, 
191 
sized, 97-101, 109, 175, 179, 183, 185, 187, 
191, 195, 197 
stacking context, 130-131 
stacking order of, 141, 159 
static, 131, 150-151, 160-161 
stretched, 97-99, 104-105, 109, 175, 179, 
183, 185, 187, 191, 195-197 
styling class of, 71 
unpositioning, 127 
«em class=“content”>, 467 


INDEX 


«em» element, 24, 53 

em measurements, 203 

«embed» element, 37 

end tags, 39 

Equal Content-sized Columns design 
pattern, 345, 360-361 

Equal-sized Columns design pattern, 
344-345, 362-363 

event handlers, 389 

Event Styling design pattern, 386-389, 463 

event.js, 387-388 


events, assigning to elements, 387-389, 463 


ex, 24 
exceptions, styling, 258 
external links, 411 


F 

Fade-out design pattern, 283, 288-289 

filter:shadow property, 207 

first-child selector, 63 

First-letter Drop Cap design pattern, 417, 
420-421 

first-letter selector, 67 

first-line selector, 67 

fixed positioning model, 123, 125, 138-139 

fixed tables, 341-344 

fixed-width columns, 344 

fixed-layout tables, 365 

fixed-position elements, 139 

fixed-width elements, 97 

Flex Columns design pattern, 344-345, 
366-367 

Float Divider design pattern, 380-381 

float positioning model, 123, 125, 142-143 

float property, 22, 81 

float:left property, 77 

float:right property, 77 

Floated Box design pattern, 77, 92-93 

Floating Alert design pattern, 455, 474-475 

Floating Drop Cap design pattern, 417, 
426-427 


Floating Graphical Drop Cap design pattern, 


417, 428-429 

Floating Section design pattern, 378-379 
floats, 143 

dividers between, 380—381 

margins, 109 

offset, 154-155 

opposing, 384-385 

relative, 144-145 

sizing, 101 

spacing between, 155 
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stacking order of, 141 
stretching, 105 
flow elements, 53 
flow-control elements, 53 
Fluid Layout design pattern, 372-373, 
382-383, 413 
fluid layouts 
fixed margins in, 377 
outside-in box, 375 
Flyout Menu design pattern, 402-405, 413 
flyout-trigger class, 403 
Font design pattern, 200-201 
font-family property, 11, 201 
font-size property, 25, 201, 251 
font-size:20px, 11 
font-style:italic, 11 
font-weight property, 12 
footer links, 411 
«form» element, 51 
forms, 51, 407—409 


G 

GIF images, 284-285 

gradient images, 289 

gradient masks, 289 

Graphical Alert design pattern, 455, 470-471 
Greenbar design pattern, 337 

group selectors, 62-63 


H 
Hanging Alert design pattern, 455, 468-469 
Hanging Drop Cap design pattern, 417, 
422-423 
Hanging Indent design pattern, 237, 240 
hasLayout property, 133 
<head> element, 37 
header elements, 42-43 
heading elements, 49, 261 
height property, 22 
boxes, 81—95, 98-99 
shrinkwrapped elements, 103 
sized elements, 101 
stretched elements, 105 
tables, 319 
height: VALUE, 99 
height:100%, 99, 105 
height:auto, 99, 105 
Hidden and Removed Cells design pattern, 
317, 330-331 
hidden class, 391—393, 405 
hierarchies, 257 
Highlight design pattern, 202-203 


horizontal margins, 22 
horizontal rule, inline, 234-235 
Horizontal Rule design pattern, 255, 
272-273, 381 
horizontal spacer, 228-229 
Horizontal-aligned Content design pattern, 
237, 242-243 
hover class, 405, 409 
«hr /» element, 259, 273 
«html» element, 37, 131 
HTML design patterns, 31. See also specific 
patterns 
block elements, 37 
class and id attributes, 54—55 
conditional stylesheet, 44—45 
header elements, 42-43 
inline elements, 37, 52-53 
multi-purpose block elements, 50-51 
structural block elements, 46-47 
terminal block elements, 48-49 
whitespace, 56-57 
HTML documents, linking stylesheets to, 8 
HTML structure, 32-37 
HTML validators, mixed content and, 51 
hyperlinks. See links 


l 
id attributes, 54-55 
IDs 
names, 61 
selectors, 14, 60-61 
syntax for, 9 
ignoreLink() function, 401 
Image design pattern, 283-285 
Image Map design pattern, 283, 286-287 
<img> element, 285 
images 
alignment of, 285 
alt text for, 37 
background, 115, 203 
as bullets, 255, 264-265 
combining multiple, 298-301 
fade-out, 288-289 
gradient, 289 
highlighting, 203 
placing text on top of, 296-297 
rounded corners, 310-313 
semi-transparent, 290-291 
styling alternate row, 337 
table, 321 
examples, 314-315 
fade-out, 288-289 


GIE 284-285 
gradient, 289 
indentor, 305 
inserting into documents, 284-285 
JPEG, 284-285 
as list markers, 263 
placing text on, 294-295 
PNG, 284-285, 289 
replacing text with, 209, 292-293 
semi-transparent, 290-291 
setting height and width of, 285 
shadowed, 302-309 
sprites, 298-301 
tooltip, 459 
using multiple, 298-301 
zooming, 293 
‘important rules, 14 
‘important selector, 17 
in, 24 
indentation, 147 
hanging indents, 240 
text, 238-239 
Indented design pattern, 148-149 
Indented Static Table design pattern, 
152-153 
indentor images, 305 
information hiding, 413 
inheritance, 59, 72-73 
cells and, 321 
simulating, 73 
visual, 74-75 
initPage( function, 387, 463 
Inline Alert design pattern, 455, 466-467 
Inline Block Quote design pattern, 437, 
450-451 
inline blocks, stretching, 105 
inline boxes, 82-83 
inline content 
atomic rendering of, 133 
offset relative, 158-159 
Inline Decoration design pattern, 215, 
230-231 
Inline design pattern, 255, 266-267 
inline elements, 37, 52-53 
advanced alignment example, 252-253 
blocks displayed as, 266-267 
center-offset, 185 
displaying as block elements, 218-219 
margins, 109 
middle-aligned, 195 
rendering as tables, rows, and columns, 
338-339 


INDEX 


static, 135 
vertical-aligned, 245 
vertically offset, 247 
inline formatting context, 83 
Inline Horizontal Rule design pattern, 215, 
234-235 
inline padded content, 227 
inline property, 23 
Inline Quote design pattern, 437, 452-453 
Inline Spacer design pattern, 215, 228-229 
inline-block boxes, 79, 84-85 
inner boxes, 81, 101 
<input type=“button’>, 407 
<input type-"image"», 409 
<input type-"reset"», 407 
<input type-"submit"», 407 
inside-out design, vs. outside-in design, 377 
Inverse-proportioned Columns design 
pattern, 345, 358-359 
Invisible Text design pattern, 210-211 


J 


JavaScript 
attaching events to elements with, 463 
buttons for triggering, 407 
libraries, attaching to events at runtime, 
387 
reusability, 415 
separating from content, 387 
JavaScript Alert design pattern, 455-457 
JPG images, 284-285 


L 
latency delays, 299, 301, 303 
layering, 75 
Layout Links design pattern, 410-411 
layouts, 371 
accessible, 415 
buttons, 406-409 
column. see columns/column layouts 
customizable, 415 
event styling, 386-389 
example, 412-415 
float dividers, 380-381 
floating sections, 378-379 
fluid, 372-373, 382-383, 415 
flyout menu, 402-405 
opposing floats, 384-385 
outside-in box, 374-377 
outside-in vs. inside-out designs, 377 
reusability, 415 
rollup, 390-393 
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tab menu, 394-397 
tabs, 398-401 
Left Aligned design pattern, 174-175 
Left Floating Callout design pattern, 437—439 
Left Marginal Alert design pattern, 455, 
476-477 
Left Marginal Callout design pattern, 437, 
444-445 
Left Marginal design pattern, 5-6, 255, 
278-279 
Left Offset design pattern, 176-177 
left property, 91, 127 
<li> element, 47, 51, 263 
line-height property, 11, 81, 83 
line-throughs, 205 
linebreaks, 235 
Linebreak design pattern, 215, 232-233 
«link» element, 7-8 
links 
breadcrumb, 411 
external, 411 
footer, 411 
menu of, 395, 397 
more-info, 411 
navigation, 410-411 
section, 411 
sequential, 411 
skip-to-main-content, 411 
styling, 69 
top, 411 
list items, 51, 397 
list property, 23 
list-item property, 77 
list-style-image property, 263 
list-style-position property, 263 
list-style-type property, 79, 263 
lists 
bullet, 263-265 
definition, 47 
faux markers for, 263 
hierarchy, 257 
numbered, 263 
ordered, 47, 263 
unordered, 47, 263 
Lists design pattern, 255, 262-263 
logical inches, 24 


M 


map elements, 287 

maps, image, 286-287 

Margin design pattern, 107-109 

margin property, 11-12, 81—93, 109, 127, 319 


margin-bottom property, 151 
margin-left property, 151, 157, 163 
margin-right property, 151, 163 
margin-top property, 151, 157 
margin:auto property, 109 
Marginal Drop cap design pattern, 417, 
430-431 
Marginal Graphical Drop Cap design 
pattern, 6-7, 417, 432-435 
margins 
aligned and offset absolute, 166-167 
aligned and offset static blocks, 163 
aligned and offset static table, 164—165 
aligned-center absolute, 168-169 
collapsed, 268-269 
indenting and outdenting, 149 
indenting tables, 153 
left, 278-279 
negative, 101 
Offset, 157 
offset float, 154-155 
Offset static, 151 
offsetting tables, 153 
right, 280-281 
table, 89 
vertical, 22, 69 
Maximum-width Sized Columns design 
pattern, 351 
measurement units 
fixed, 24 
flexible, 24 
ratios between, 25 
menus 
flyout, 402-405, 413 
nested, 405 
tab, 394—397 
merged borders, 329 
metadata, 41—43 
Middle Aligned design pattern, 194-195 
Middle Offset design pattern, 196-197 
MIME content type, vs. DOCTYPE, 40 
minimum content width, 347 
Minimum-width Sized Columns design 
pattern, 351 
Mixed Column Layouts design pattern, 345, 
368-369 
mixed content, 51-53 
mm (millimeters), 24 
more-info links, 411 
multi-purpose block elements, 50-51 
multiple classes, assigning to element, 9, 61 


negative margins, 149, 153 

nested alignment contexts, 251 

Nested Alignment design pattern, 237, 
250-251 

nested flyout menus, 403 

nested menus, 405 

nontabular data, 344, 373 

normal flow of blocks, 87 

normalized stylesheet, 28-29 

«noscript» element, 51 

Nowrap design pattern, 215, 220-221 

numbered lists, 263 


0 


«object» element, 37 
Offset Absolute design pattern, 156-157 
offset elements, 147 

absolute, 156-157 

bottom offset, 192-193 

center offset, 184-185 

fixed, 156-157 

float, 154-155 

left offset, 176-177 

middle offset, 196-197 

relative, 158-159 

right offset, 180-181 

sprite, 300 

static, 150-153 

top offset, 188-189 
Offset Fixed design pattern, 156-157 
Offset Float design pattern, 154-155 
Offset Relative design pattern, 158-159 
Offset Static design pattern, 150-151 
Offset Static Table design pattern, 152-153 
«ol» element, 47, 263 
onclick attribute, 457 
onclick event, 389, 393, 401 
onmouseout event, 389 
onmouseover event, 389, 401 
onreset event, 389 
onsubmit event, 389 
Opposing Floats design pattern, 384—385, 

413 

ordered lists, 47, 263 
ordered sets, 257 
outdenting, 147, 149 
outer boxes, 101, 105 
outer width, 377 
Outside-in Box design pattern, 374-377 
outside-in design, vs. inside-out design, 377 
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Overflow design pattern, 107, 116-117 
overflow property, 81-89, 319 
overflow:scroll property, 133 
overlined text, 205 


P 
«p» element, 49 
Padded Content design pattern, 215, 
226-227 
Padded Graphical Drop Cap design pattern, 
417, 424-425 
Padding design pattern, 107, 112-113 
padding property, 12, 81-93, 319 
Page Break design pattern, 107, 120-121 
page loading, speed of, 28 
page property, 23 
paragraphs, 49 
<param> element, 37 
parent elements 
relation to child elements, 47 
rendering, 79 
pc (picas), 24 
percentage width columns, 344 
Percentage-proportioned Columns design 
pattern, 344-345, 356-357 
percentages, 109 
performance issues, 28 
pixels, 24 
PNG images, 284-285, 289 
Popup Alert design pattern, 455, 460—463 
popup-trigger class, 461 
position property, 81, 123, 126-127 
position selectors, 62-63 
position:absolute property, 77, 127, 129, 
136-137, 157 
position:fixed property, 77, 127, 129, 
138-139, 157 
position:relative property, 127, 129, 141, 145 
position:static property, 127, 135 
positional styling, 258 
Positioned design pattern, 126-127 
positioned elements. See also positioning 
aligning, 129 
atomic, 133 
stacking contexts, 130-131 
positioned property, 22 
positioning/positioning models, 123-145 
absolute, 125, 136-137 
align static inline, 160-161 
aligned and offset absolute, 166-167 
aligned and offset static block, 162-163 
aligned and offset static table, 164—165 
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aligned outside, 170-171 
aligned-center absolute, 168-169 
atomic, 123, 132-133 
bottom-aligned, 190-191 
bottom offset, 192-193 
center-aligned, 182-183 
center offset, 184-185 
clear, 142-143 
closest positioned ancestor, 128-129 
fixed, 125, 138-139 
float, 125, 142-143 
indents, 148-149 
left-aligned, 174-175 
left offset, 176-177 
middle-aligned, 194-195 
middle offset, 196-197 
offset absolute, 156-157 
Offset fixed, 156-157 
offset float, 154-155 
offset or indented static table, 152-153 
offset relative, 158-159 
offset static, 151 
properties of, 125 
relative, 125, 140-141 
relative-float, 125, 144-145 
right-aligned, 178-179 
right offset, 180-181 
stacking context, 130-131 
static, 125, 134-135 
top-aligned, 186-187 
top offset, 188-189 
positive margins, 149, 153 
«pre» element, 223 
Preserved design pattern, 215, 222-223 
properties, 8, 19. See also specific properties 
common, 20-21 
content, 21 
disabling, 12 
layout, 22 
specialized, 23 
property values, 11-12 
pseudo selectors, rule priority and, 14 
pseudo-class selectors, 68-69 
pseudo-element selectors, 66 
pseudo-elements, positioning, 421 
pt (point), 24 
pull quotes, 437. See also callouts 
purgeAllEvents() function, 387-388, 463 
px (pixels), 24 


Q 


quirks mode, 41 
quotes, 437 
block, 448 
inline, 452—453 
inline block, 450-451 
pull, 437 
with values, 9 


R 
reference points, 127 
relational data, 257 
relative elements, 141, 159 
relative float positioning model, 123, 125, 
144-145 
relative positioning model, 123, 125, 140-141 
removeClass() function, 389, 401 
Removed and Hidden Rows and Columns 
design pattern, 317, 332-333 
rendering, speed of, 28 
replaceClass() function, 389 
replaced elements, 53, 85, 101 
Replaced Text design pattern, 283, 292-293 
Right Aligned design pattern, 178-179 
Right Floating callout design pattern, 437, 
440-441 
Right Marginal Alert design pattern, 455, 
478-479 
Right Marginal Callout design pattern, 437, 
446-447, 449 
Right Marginal design pattern, 255, 280-281 
Right Offset design pattern, 180-181 
right property, 91, 127 
rolledup class, 393 
rollup class, 391 
Rollup design pattern, 390—393, 413 
rollup-trigger class, 391, 393 
rollup-trigger element, 391 
Rounded Corners design pattern, 283, 
310-313 
Row and Column Groups design pattern, 
317, 320-321 
rows 
fluid layout, 373 
grouping, 320-321 
removed and hidden, 332-333 
rendering regular elements as, 338-339 
selecting, 322-323 
styling alternate, 336-337 
rowspan attribute, 319 


rules, 8 

cascading order, 14-15, 17 

disabling, 12 

location of, and priority order, 15 
rulesets, creating, 9 
Run-in Alert design pattern, 455, 472-473 
Run-in design pattern, 255, 270-271 


S 


Screenreader-only design pattern, 212-213 
Section design pattern, 255, 260-261 
«section» element, 261 
section links, 411 
sections, 261 
floating, 378-379 
fluid layout for, 383 
selector design patterns, 8, 23 
attribute selectors, 64-65, 67 
cascade order and, 14-17 
class selector, 60-61 
group, 62-63 
ID selector, 60-61 
position, 62-63 
pseudo-class selectors, 68-69 
pseudo-element selectors, 66 
subclass selector, 70-71 
type selector, 60-61 
self-contained layouts, 129 
semantic elements, 53 
Semi-transparent design pattern, 283, 
290-291 
semicolons (;), 9 
Separated Borders design pattern, 317, 
324-325 
sequential links, 411, 413 
sets, 257 
Shadowed Image design pattern, 283, 
304-309 
shadowed images, 302-309 
Shrinkwrapped Columns design pattern, 
344, 348-349 
ShrinkWrapped design pattern, 102-103 
shrinkwrapped elements, 102-103 
bottom-aligned, 191 
left-aligned, 175 
right-aligned, 179 
top-aligned, 187 
shrinkwrapped property, 95 
shrinkwrapped tables, 103, 153, 165, 341, 343 
shrinkwrapping, 97-99 
sibling selector, 63 
siblings, stacking context and, 131 
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Size-proportioned Columns design pattern, 
344-345, 354-355 
sized absolute elements 
center-offset, 185 
middle-aligned, 195 
middle-offset, 197 
sized blocks, aligned and offset, 163 
Sized Columns design pattern, 344—345, 
350-351 
Sized design pattern, 100-101 
sized elements, 97-101 
bottom-aligned, 191 
center-aligned, 183 
center-offset, 185 
left-aligned, 175 
margins, 109 
middle-aligned, 195 
middle-offset, 197 
right-aligned, 179 
top-aligned, 187 
sized property, 95 
sized tables, 153, 341, 343 
skip-to-main-content links, 411 
space entities, 57 
spacer blocks, 258-259, 274-277 
spacing. See also indentation 
changing between blocks, 259 
horizontal spacer, 228-229 
Spacing design pattern, 215-217 
«span class=“alert TYPE”>, 467 
«span» element, 53, 55, 233, 293 
sprites, CSS, 298-301 
stacking context, 130-131 
stacking order, controlling, 141, 159 
standards mode, 41 
start tags, 39 
static alerts, 455 
static blocks 
alignment, 162-163 
atomic rendering of content in, 133 
offsetting, 162-163 
sizing, 101 
width of, 163 
static elements 
aligning, 160-161 
spacing of, 150-151 
stacking, 131 
static positioning model, 123, 125, 134-135 
static tables, aligned and offset, 164-165 
stretched absolute elements, middle- 
aligned, 195-197 
Stretched design pattern, 104-105 
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stretched elements 
bottom-aligned, 191 
center-aligned, 183 
center-offset, 185 
left-aligned, 175 
margins, 109 
right-aligned, 179 
top-aligned, 187 
stretched property, 95 
stretched tables, 97, 99, 105, 153, 341, 343 
stretching boxes, with width:auto, 97 
strict DOCTYPE, 41 
strings, syntax, 9 
Striped Tables design pattern, 317, 336—337 
«strong class=“heading”>, 467 
«strong» element, 53 
structural elements, 37, 46-47 
Structural Meaning design pattern, 255-257 
structure 
block, 256-257 
hierarchies, 257 
lists, 262-263 
sections, 260-261 
separating from content, 387 
sets, 257 
visual, 258-259 
«style» element, 7-8, 43 
style, separating from content, 387 
style attribute, 7-8, 14 
Styled Collapsed Borders design pattern, 
317, 328-329 
styles, 8, 43 
stylesheets. See also CSS 
alternate, 43 
in cascade order, 17 
conditional, 44—45 
linking to documents, 8, 43 
location of, 8 
naming, 8 
normalized, 28-29 
troubleshooting, 26-27 
using, 7-8 
«sub» tag, 249 
«sup» tag, 249 
subclass selector, 70—71 
subclasses, styling, 71 
Subscript and Superscript design pattern, 
237, 248-249 
superscript, 248-249 
swapClasses() function, 389 
syntax, CSS, 8-12, 14 


T 
tab links, dynamic, 397 
Tab Menu design pattern, 394—397, 399 
tab-content element, 399, 401 
tab-label element, 399, 401 
«table» element, 47 
table borders, 101 
Table Box model, 88-89 
table captions, 49 
table cells, 51 
Table design pattern, 317-319 
Table Layout design pattern, 317, 340-341 
table property, 23 
Table Selectors design pattern, 317, 322-323 
table-cell property, 77 
table-layout property, 81, 89, 341 
Tabled, Rowed, and Celled design pattern, 
338-339 
tables 
accessible, 317 
aligned and offset static, 164-165 
backgrounds, 321 
borders between, 324-325 
cells 
hidden and removed, 330-331 
vertically-aligned data in, 334-335 
collapsed borders between, 326-327 
columns. see columns/column layouts 
creation of simple, 318-319 
fixed, 343-344 
fixed-layout, 365 
indenting, 152-153 
introduction, 317 
layout of, 340-341 
offsetting, 152-153 
properties of, 319 
relational data in, 257 
rendering regular elements as, 338-339 
IOWS 
fluid layout, 373 
grouping, 320-321 
removed and hidden, 332-333 
rendering regular elements as, 338-339 
selecting, 322-323 
styling alternate, 336-337 
selectors, 322-323 
shrinkwrapped, 103, 153, 165, 343 
sized, 153, 341, 343 
static, aligned and offset, 164-165 
stretched, 97, 99, 105, 153, 341, 343 
styled collapsed borders, 328-329 
types of, 343-344 


Tables, Rowed, and Celled design pattern, 
317 
tabs, 397 
tabs class, 395 
Tabs design pattern, 398-401, 413 
tabular data, column layouts for. See 
columns/column layouts 
tabular data structures, 47 
«tbody» element, 47 
«td» element, 47, 51 
terminal blocks, 48-49, 87 
text. See also text styling 
atomic rendering of, 133 
computer code, 224-225 
horizontal-aligned, 242-243 
horizontal spacing, 228-229 
padding, 226-227 
placing on top of background images, 
296-297 
placing on top of images, 294-295 
preserving whitespace in, 222-223 
preventing from wrapping across lines, 
220-221 
replacing with image, 292-293 
spacing, 216-217 
styling as block element, 219 
subscript, 248-249 
superscript, 248-249 
underlined, 205 
vertical-aligned, 244-245 
Text Decoration design pattern, 204—205 
Text Indent design pattern, 237-239 
Text Replacement design pattern, 4—5, 
208-209 
Text Shadow design pattern, 206-207 
text styling 
Font design pattern, 200-201 
Highlight design pattern, 202-203 
Invisible Text design pattern, 210-211 
Screenreader-only design pattern, 
212-213 
Text Decoration design pattern, 204-205 
Text Replacement design pattern, 208-209 
Text Shadow design pattern, 206-207 
text-align property, 161, 243, 319 
text-indent property, 239, 241 
«tfoot» element, 47, 321 
«th» element, 47, 51 
«thead» element, 47, 321 
toggleClass() function, 389, 393 
Tooltip Alert design pattern, 455, 458-459 
Top Aligned design pattern, 186-187 


INDEX 


top links, 411 

Top Offset design pattern, 188-189 
top property, 91, 127 

«tr» element, 47 

transitional DOCTYPE, 41 
translucent images, 291 
transparent color, 111 
troubleshooting, 26-27 

type selector, 60-61 


U 
«ul» element, 47, 263 
underlined text, 205 
Undersized Columns design pattern, 
344-345, 364-365 

Unicode UTF-8, 9 
units of measure 

fixed, 24 

flexible, 24 

ratios between, 25 
universal selector (*), 14, 61 
unordered lists, 47, 263 
unordered sets, 257 


V 

validated code, 41 

values, 8 

vertical margins, 22, 269 

vertical-align property, 245, 247, 335, 319 

vertical-align selector, 67 

Vertical-aligned Content design pattern, 
244—245 

Vertical-aligned Data design pattern, 317, 
334-335 

Vertical-aligned design pattern, 237 

Vertical-offset Content design pattern, 237, 
247 

Vertical-offset design pattern, 246 

videos, embedding into documents, 37 

Visibility design pattern, 107, 118-119 

visibility property, 81 

visibility:hidden property, 331, 333 

visual inheritance, 74-75 

Visual Structure design pattern, 255, 258-259 


W 
white-space:no wrap property, 221 
white-space:pre property, 223 
whitespace 

HTML, 56-57 

in CSS, 10 

preserving, 222-223 
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width property, 22 
assigned to cells, 344 
boxes, 81-99 
column, 344, 346-347 
inner width, 377 
multiple meanings of, 1 
shrinkwrapped elements, 103 
sized elements, 101 
stretched elements, 105 
tables, 319, 341 
width: VALUE property, 97 
width:100% property, 97, 105 
width:auto property, 97, 105 


X 
XHTML, 38-40 
XHTML HTML, validated, 41 


Y 
yahoo.js, 387 


Z 

z-index property, 75, 91, 127, 137, 139, 159 
z-index values, 131 

Z-order property, 131 

Zebra Striped design pattern, 337 


